[React] Redux 초기 세팅, 구조 with Ducks

 

처음에 너무 가볍게 접근했던 리덕스..

몇차례 호되게 당하고.. 이제야 조금씩 감을 잡기 시작하여 다시 작성을 해보기로 했다.

 

 

리덕스 초기 세팅

1. react-redux, redux설치

npm i react-redux redux

 

2. action 함수와 type, reducer를 관리할 파일 생성.

 

[modules/todo.js]

const initialState = [1, 2, 3, 4]; //state 초기값 생성

const todoReducer = (state = initialState, action) => {
  return state;
};

export default todoReducer;

가끔 기초강의 보면 세개를 각각의 파일로 관리하던데

리듀서와 액션 관련 코드들을 한 파일에 모두 작성하는 Ducks패턴으로 진행했다.

폴더명은 Docks패턴의 관습적인 폴더명인 modules를 사용했다.

 

reducer는 export default로 내보내고 action함수는 export로 내보낸다.

 

초기 세팅이기때문에 액션타입과 액션 생성 함수는 생략했지만

액션 타입과 액션 생성 함수는 아래와 같이 넣는다.

// const INCREASE = 'todo/INCREASE';
// const DECREASE = 'todo/DECREASE';

// export const increase = () => ({ type: INCREASE });
// export const decrease = () => ({ type: DECREASE });

 

 

3. reducer를 관리하는 index.js파일 생성.

 

[modules/index.js]

import { createStore } from "redux";
import todoReducer from "./todo";

const rootReducer = todoReducer;

const store = createStore(rootReducer);

export default store;

현재는 한개의 리듀서를 사용하기 때문에 rootReducer에 todoReducer를 담아 놓았다.

 

* Redux DevTools 사용 시 store를 아래와 같이 변경

const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

 

* 복수의 리듀서 사용시 combineReducers 사용

import { createStore } from "redux";
import { combineReducers } from "redux";
import todoReducer from "./todo";

const rootReducer = combineReducers({ todoReducer, productReducer });

const store = createStore(rootReducer);

export default store;

 

 

4. 최상위 index에 연결

 

[index.js]

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App.jsx";
import store from "./modules/index";
import { Provider } from "react-redux";

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

store를 import하여 Provider로 감싸서 내보내준다.

 

 

5. 테스트

import React from "react";
import { useSelector } from "react-redux";

const Todos = (props) => {
  const state = useSelector((state) => state);
  console.log(state, "state");
  
  return (
    <div>
      <h1>Todo</h1>
    </div>
  );
};

export default Todos;

useSelector로 state를 받아서 잘 출력되는지 테스트 한다.