Redux: react 전역 상태 관리

2021.12.29

redux 기본 사용법

세팅

기본 설치
```
yarn add react-redux
yarn redux
```
추가 설치
```
yarn add redux-redux-devtools-extension
```
-> 리덕스 자체에서 사용하는 모듈은 아니다.

1. 클릭 이벤트 받는 컴포넌트 생성

import React from "react";

const Counters = ({ number, onIncrease, onDecrease, onReset }) => {
  return (
    <div>
      <h1>{number}</h1>
      <div>
        <button onClick={onIncrease}>+1</button>
        <button onClick={onDecrease}>-1</button>
        <button onClick={onReset}>reset</button>
      </div>
    </div>
  );
};

export default Counters;

위에서 상태(state) number값 받고, 'onIncrease, onDecrease, onReset'는 상태를 변하게 하는 함수이다.

이 함수들은 리듀서 함수로 만든다.

2. 액션 타입 지정

const INCREASE = "counter/INCREASE";
const DECREASE = "counter/DECREASE";
const RESET = "counter/RESET";

액션 타입 = "문자열"
액션 타입은 대문자로 작성
문자열에 들어가는것중 '폴더명/액션타입' 형태로 지어서 프로젝트가 커졌을때를 대비하여서 이다.

3. 액션 생성 함수

export const increase = () => ({
  type: INCREASE,
});
export const Decrease = () => ({
  type: DECREASE,
});
export const Reset = () => ({
  type: RESET,
});

액션을 생성하는 함수

'increase'를 호출하면 'type: INCREASE'를 반환 시켜준다.

4. 상태(state) 초기값 설정

const initialState = {
  number: 0,
};

상태의 초기값을 설정한다.

number 라는 상태가 0이라는 값을 가지고 있다.

(참고로 폴더를 나누게 된다면 2,3, 4+5로 나눈다 -> 상태 초기값은 리듀서 함수가 있는 곳어 넣음)

5. 리듀서 함수

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

export default counter;

설정한 상태의 초기값과 action값을 받는다.

6. root 리듀서 생성

./modules/index.js

import { combineReducers } from "redux";
import Counters from "../components/Counters";

const rootReducer = combineReducers({
  // modules/Counter.js의 리듀서 함수
  Counters,
});

export default rootReducer;

위의 Counters는 2~5번에서 했던 리듀서 함수 이다.

리듀서들이 늘어나면 다음과 같이 모든 리듀서를 받는 root리듀서를 만든뒤 rootReducer만 전달한다.

7. store

위에서 만든 rootReducer를 이제 store를 생성하여 현재 프로젝트에서 관리 할 수 있게 한다.

store는 App.js에 다음과 같이 설정한다.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

// =-=-
// store 생성 함수
import { createStore } from "redux";

// 리액트에서 store를 사용하게 해준다.
import { Provider } from "react-redux";

// 만든 리듀서들을 넣은 rootReducer
import rootReducer from "./modules/index";

const store = createStore(rootReducer);
// =-=-

ReactDOM.render(
  <React.StrictMode>
    {/** Provider로 <App/>을 감싸고, store를 전달한다. */}
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

필요 모듈 부분

store 생성 함수
```
import { createStore } from "redux";
```
react에서 store를 사용하기 위한 모듈
```
import { Provider } from "react-redux";
```

이전에 만든 rootReducer를 가져와서 다음과 같이 store를 생성하여 store변수에 저장한다.

const store = createStore(rootReducer);

redux는 react만을 위한 것이 아니기 때문에 store를 다음과 같이 Provider로 전송해야한다.

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

그리고 <App/> 을 Provider로 감싸주어서 store를 모든 리액트 파일에서 접근 할 수 있도록 한다.