[React] Redux개념

Redux란?

props없이 state(상태)를 공유할 수 있게 도와주는 Javascript 상태관리 라이브러리이다.

Redux를 사용하는 이유

1.props drilling 이슈 해결

상위 컴포넌트로부터 계속 받아서 사용하다보면 관리가 매우 복잡해진다.
Redux를 사용하면 상태를 컴포넌트 계층 구조를 따라 수동으로 전달할 필요가 없게 된다.

2.중앙상태관리

상태를 중앙에서 패턴을 제공하기 때문에 여러 컴포넌트 간에 데이터를 쉽게 공유하고 업데이트 할 수 있다.

3.middleware 확장

Redux는 미들웨어를 통해 액션을 디스패치하기 전에 특정 작업을 수행할 수 있는 확장성 있는 구조를 제공한다. 이를 통해서 비동기 작업, logging, routing 등을 쉽게 구현할 수 있다.

Store, Action, Reducer, Dispatch개념

🧺Store

• Store은 상태가 관리되는 오직 하나의 공간이다.
• Store라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다.

import { createStore } from 'redux';

const store = createStore(rootReducer); 

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

✔️Action

• 스토어의 상태를 변경하기 위해서는 액션을 생성해야 한다.
• Action은 앱에서 스토어에 운반할 데이터와 같다 (주문서랑 같다고 보면 된다.)
• Action은 자바스크립트 객체 형식으로 되어있다.

액션 타입 만들기

const SET_DIFF = 'counter/SET_DIFF';
const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

👉 Ducks 패턴 : 액션 타입, 액션 생성 함수, 리듀서를 각각 별도의 파일에 분리하여 작성하기 보다 셋을 하나의 모듈처럼 한 파일 안에 작성하자는 제안이다.

<규칙>
1. reducer는 export default로 내보낸다.
2. action 함수는 export로 내보낸다.
3. 액션타입을 정의할 때는 'reducer/ACTION_TYPE '형태로 적어줘야 액션 이름이 중복되는 것을 방지 할 수 있다.

액션 생성함수 만들기

export const setDiff = diff => ({ type: SET_DIFF, diff });
export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });

🌈Reducer

• Action은 store에 바로 전달하는 것이 아니라, Reducer에 전달해야 한다.
• Reducer가 주문을 보고 store의 상태를 업데이트 하는 것이다.
• Action은 Reducer에 전달하기 위해서는 dispatch() 메서드를 사용해야 한다.

초기 상태 선언

const initialState = {
  number: 0,
  diff: 1
};

리듀서 선언

export const counter = (state = initialState, action) => {
  switch (action.type) {
    case SET_DIFF:
      return {
        ...state,
        diff: action.diff
      };
    case INCREASE:
      return {
        ...state,
        number: state.number + state.diff
      };
    case DECREASE:
      return {
        ...state,
        number: state.number - state.diff
      };
    default:
      return state;
  }
}

📃Dispatch

• store의 내장 함수로 action을 발생시킨다.
• action을 파라미터로 전달하고 reducer를 호출한다.

import { useSelector, useDispatch } from 'react-redux';

const dispatch = useDispatch();

// 각 액션들을 디스패치하는 함수들
const onIncrease = () => dispatch(increase());
const onDecrease = () => dispatch(decrease());
const onSetDiff = diff => dispatch(setDiff(diff));

<참고>
https://react.vlpt.us/redux/04-make-modules.html