Redux

Redux란?
: 상태(State)를 전역적으로 관리하는 JavaScript 라이브러리

설치

npm install redux
npm install react-redux

or

yarn add redux
yarn add react-redux

---

구조

• store
  : 전역적으로 관리할 상태(State)의 정보와, 해당 상태를 조작하는 리듀서(Reducer)들을 가지는 저장소

• Action
  : 전역적으로 관리하는 상태(State)의 "조작 주문서"
  : 객체 형태

---

수행 절차

1. 전역적으로 관리되는 State에 이벤트 발생
2. 해당 이벤트의 핸들러가 자신이 수행해야 하는 작업을 Action 객체 타입으로 저장
3. 해당 Action 객체를 Store로 전송
4. Store에서 전달받은 Action의 타입(Type)에 해당하는 Reducer를 탐색
5. Action의 타입에 해당하는 Reducer가 요청된 작업을 수행한 후 반영

---

주요 Hook

1. useSelector : 컴포넌트가 사용할 Reducer 집합(=module)을 선택
2. useDispatch : 조작할 Action을 선택

---

코드

• index.js

  import { Provider } from "react-redux";
  import store from "redux/config/configStore";

  // 중략

  <Provider store={store}>
    <자식 컴포넌트 />
  </Provider>

• redux/config/configStore.js

  import { createStore, combineReducers } from "redux"

  const rootReducer = combineReducers({ ReducerList1, ReducerList2, ... });	// 사용하는 Reducer 모음의 집합
  const store = createStore(rootReducer);	// Reducer 모음의 집합을 가지는 store

  export default store;

• redux/modules/Reducer집합명.js

  // Action Value
  const ACTION_TYPE1 = "reducer집합명/ACTION_TYPE1";
  const ACTION_TYPE2 = "reducer집합명/ACTION_TYPE2";

  // Action Creator : Action 객체 생성
  export const action1 = (payload) => {
    return {
      type: ACTION_TYPE1,
      payload,
    }  
  }
  export const action2 = (payload) => {
    return {
      type: ACTION_TYPE2,
      payload,
    }  
  }

  // Initial State
  const initialState = {...};

  // Reducer List
  const Reducer집합명 = (state = initialState, action) => {
    switch(action.type) {
      case ACTION_TYPE1:
        // 수행할 작업
        return 반환값;
      case ACTION_TYPE2:
        // 수행할 작업
        return 반환값;
      default:
        return 반환값; // 일반적으로 return state;
    }
  };

  export default Reducer집합명;

• 해당 state를 사용/조작하는 컴포넌트

  import { useSelector, useDispatch } from "react-redux";
  import { action1, action2 } from "redux/modules/Reducer집합명"

  function 컴포넌트명() {
    const reducer집합 = useSelector((state) => state.Reducer집합명);	// useSelector
    const dispatch = useDispatch();	// useDispatch
  
    const doAction1 = (payload항목) => {
      dispatch(action1(payload항목));
    };
    const doAction2 = (payload항목) => {
      dispatch(action2(payload항목));
    };
  
    return (
      <ExButton onClick={() => {doAction1(payload항목)}}></ExButton>
      <ExButton onClick={() => {doAction2(payload항목)}}></ExButton>
    );
  }