[리액트 React] 리덕스 (Redux)

설치 명령어

npm install redux
npm install react-redux

 

Redux

Redux는 전역 상태를 관리하는 컨테이너이다

state를 전역 상태로 만들어 모든 컴포넌트에서 접근이 가능해지기 때문에 state의 유지 보수가 용이하다

 

 

Store

• 중앙 데이터 관리소, Reducer를 하나로 묶어 관리하는 곳
• src폴더 내부에 config폴더를 만들고 configStore.js 파일을 생성한다
• combineReducers에 객체형태로 Reducer를 하나로 묶어 rootReducer에 담아준다
• store에 createStore로 Reducer를 모아 놓은 rootReducer를 담아준다 그럼 모든 Reducer는 store에 들어가게 된다
• Reducer의 묶음인 store를 외부에서 사용할 수 있게 export default 해준다 그럼 모든 컴포넌트에서 store에 담긴 Reducer를 사용할 수 있다

const rootReducer = combineReducers({
  counter,
  users,
});
const store = createStore(rootReducer);
// createStore 컴포넌트를 하나로 묶은 Reducer을 넣어준다

export default store;

 

최상위 컴포넌트에 store 설정

• App.jsx 상위 컴포넌트인 index.jsx에   <Provider store={store}> 를 설정해 주면 App.jsx 하위 컴포넌트들은 store에 모두 접근이 가능해진다

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

 

modules

• Reducer를 생성하는 곳 (함수로 기능이 만들어지는 곳)
• action은 객체형태로 되어있고 type과 payload를 가지고 있다, state에 어떤 행동(작업)을 취할지 정한다
• action Type이란 어떠한 로직을 실행할지 문자열로 정의하는 것 (switch문 case에 넣을 것 여러 action Type이 있을 경우 휴먼 에러를 방지하기 위해 상수로 정의한다 )
• payload란 쉽게 생각하면 매개변수와 같다. 기능을 수행하기 위해 Reducer에 인자로 넘기는 값
• action creator를 만들어 type과 payload를 받는 객체를 만들어주고, 외부에서 사용가능하도록 export 해준다
• Reducer( switch 문)는 함수로 payload를 인자로 받아서 state에 어떠한 기능을 payload를 받아 수행한다 ( payload를 꼭 받지 않아도 된다)
• initialState는 state의 초기값으로 const [number, setNumber] = useState(0) = initialState와 같은 것이다
• counter는 Reducer로 함수다 2개의 인자를 받는다 state=초기값, action객체(store에 들어가는 것이 바로 counter인 것)

 

1. switch문에 case PLUS_ONE의 return값은 initialState에 있는 number state에 +1을 해주는 것
2. Reducer에서 인자로 받은 state에 number가 들어있기 때문에 state.number + 1을 해주면 number에 +1을 더해주는 기능이 완성된다
3. case MINUS_ONE의  return값은 number에  action.payload 만큼 - 해주는 것
4. number의 초기값이 5이고  payload가 1이면 5 - 1 = 4를 해주는 것이다 

 

// action value
const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE";

// action creator
export const PlusOne = () => {
  return {
    type: PLUS_ONE,
  };
};

export const MinusOne = (payload) => {
  return {
    type: MINUS_ONE,
    payload
  };
};

// 초기 상태값(state)
const initialState = {
  number: 0,
};
// const [number,setNumber] = useState(0) = initialState 같은 로직

const counter = (state = initialState, action) => {
  switch (action.type) {
    case PLUS_ONE:
      return {
        number: state.number + 1,
      };
    case MINUS_ONE:
      return {
        number: state.number - action.payload,
      };

    default:
      return state;
  }
};
export default counter;

 

 

App.jsx

• Reducer에서 만든 기능을 컴포넌트로 가져와 사용하는 방법
• useSelector는 함수로 state의 관리소인 store에 접근하여 counter의 값을 가져오기 위해 사용한다(현재 카운트 부분을 보면  counter.number은 counter Reducer에 있는 number state를 가져온 것)
• 컴포넌트에서 Reducer로 요청을 보낼 땐 useDispatch를 사용하며 dispatch는 action Type과 payload( payload는 생략가능)를 담아 Reducer로 보내준다( onClick{()=>{함수 (인자)}}을 예시로 들면 클릭 시 함수에 인자를 전달하며 실행시키는 것과 같다 Type이 PLUS_ONE , payload가 인자 인 셈)
• dispatch(PlusOne())는 결과적으로 클릭 시 Reducer에 작성한 대로 number state에 +1씩 해주는 것

 

1. payload 사용하는 방법 
2. 숫자를 넣을 input를 만들고 state를 생성한다 
3. click과 change 함수를 넣어준다
4. dispatch에 모듈에서 객체로 만들어 놓은 action creator(type와 payload  가 들어있다)를 넣어주고  MinusOne Reducer에 input 값인 minusNum를 매개변수( payload   )로 보내주면 minusHandler를 호출할 때마다  counter안에 number state - minusNum( payload )가 실행된다
5. setMinusNum안에 e 앞에 +를 넣어준 이유는 e.target.value가 문자열로 들어가기 때문에 숫자로 바꿔주기 위해서이다
6. 여기서 제일 중요한 포인트는 payload는 어떤 값이든 들어갈 수 있는 매개변수라는 것이다

 

function App() {
  const counter = useSelector(function (state) {
    return state.counter;
  });
  console.log("counter", counter.number);

const [minusNum,setMinusNum]=useState(0)
const dispatch = useDispatch();
  
const minusHandler=()=>{
dispatch(MinusOne(minusNum));
}

  return (
    <>
      <div>현재 카운트 : {counter.number}</div>
      <button
        onClick={() => {
          dispatch(PlusOne());
        }}
      >
        +
      </button>
      
      <input type="number" valuse={minusNum} onchange={(e)=>setMinusNum(+e.target.value)}/>
      <button
        onClick={minusHandler}
      >
        -
      </button>
    </>
  );
}

 

내 맘대로 간단 정리

• 모듈은 리듀서 함수로 기능을 만드는 곳이다
• 스토어는 모듈에서 만들어진 리듀서를 하나로 묶어 전역에서 사용할 수 있게 해 준다
• 유즈셀렉토는 모듈에서 만들어진 리듀서의 스테이트를 가져오는 것이다
• 디스패치는 액션타입과 페이로드를 리듀서로 전달하는 역할을 한다
• 액션타입은 어떤 기능을 실행할지 명시하는 함수 이름과 같으며, 페이로드는 함수에 전달하는 매개변수이다