[Redux] React에 적용하기, 파일 구조

🎈 전체 구조

📂 src
 ┣ 📂 actions
  	┣ 📄 ActionTypes.js
 	┗ 📄 index.js
 ┣ 📂 reducers
 	┣ 📄 리듀서1.js
    ┣ 📄 리듀서2.js 
    ┣ 📄 ...
 	┗ 📄 index.js
 ┣ 📂 stores
  	┗ 📄 index.js
 ┣ 📂 components
 ┣ 📄 App.js
 ┗ 📄 index.js

🎈 1. 스토어 생성

🔰 생성 : configureStore

configureStore 를 이용해 스토어를 생성한다.
사용을 위해 @reduxjs/toolkit 설치가 필요하다.

$ npm install @reduxjs/toolkit -D

/* 📄 src/stores/index.js */

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from "../reducers/index";

const store = configureStore({
  reducer: rootReducer
  middleware: 미들웨어
  등등..
});

export default store;

또는 store 폴더를 만들지 않고, 📄 src/index.js 에 바로 추가해준다.

🔰 연결 : Provider

<App /> 을 <Provider> 로 감싸준다.
Provider 는 리액트 앱에 스토어를 연동해주는 내장 컴포넌트이다.

위에서 생성한 store도 import 한다.

/* 📄 src/index.js */

...

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
  	<App />
  </Provider>
);

reportWebVitals();

🎈 2. Actions

🔰 ActionType.js

액션을 사용할 때마다 type 값을 문자열로 사용하면 번거로우므로 파일에 따로 저장한다.

/* 📄 src/actions/ActionTypes.js */

export const 액션타입1 = '액션타입1';
export const 액션타입2 = '액션타입2';

import 시, import * as types from './ActionTypes 으로 불러온다.

🔰 Action 생성자

액션 객체를 생성하는 함수이다.
생성한 객체를 Dispatcher에 전달한다.

/* 📄 src/actions/index.js */

import * as types from './ActionTypes';

export const actionCreater1 = () => {
    return { type: types.액션타입1 }
}

export const actionCreater2 = (payload) => {
    return { 
      type: types.액션타입2, 
      payload: 페이로드,
    }
}

🎈 3. Reducer 생성

reducer 들을 모듈화해서 한 곳에서 합치는 구조로 만든다.

🔰 Reducer 만들기

📂 src/reducers 에 리듀서 파일을 만든다.

1. 초기 상태를 선언한다.
2. 상태관리 로직 함수(리듀서)를 선언한다.

/* 📄 src/reducers/리듀서1.js */

import * as type from "../actions/ActionTypes";

const 초기State = {
  키: 값,
  키: 값,
};

const 리듀서1 = (state = 초기State, action = {}) => {
  switch (action.type) {
    case type.액션타입:
      return {
        ...state,
        키: 업데이트값
      }

    default:
      return state;
  }
};


export default 리듀서1;

🔰 합치기 : combineReducers

combineReducers 를 이용해 모든 리듀서들을 합쳐준다.

/* 📄 src/reducers/index.js */

import { combineReducers } from "redux";
import 리듀서1 from "./리듀서1"
import 리듀서2 from "./리듀서2"
...

const rootReducer = combineReducers({
  리듀서1 : 리듀서1,
  리듀서2 : 리듀서2,
  ...
});

export default rootReducer;

References

[React] Redux를 사용해보자

Redux 를 통한 React 어플리케이션 상태 관리 :: 1장. 카운터 만들기