[#React] React 프로젝트에 Redux 사용하기(초기 설정)

 

 

 

 

 

 

Redux를 사용할 거기 때문에 세팅해 보겠습니다

 

npm install redux
npm install react-redux
npm install redux-actions

 

 

 

 

폴더, 파일 생성해 주세요

 

src

ㄴstore

   ㄴmodules

      ㄴindex.js

      ㄴtest.js

 

 

 

 

 

 

① src/store/modules/test.js

 

import { createAction, handleActions } from "redux-actions";
import produce from "immer";

const TEST = "TEST";

export const setPing = createAction(TEST);

const initialState = {
  val: "complete"
};

export default handleActions({
  [TEST]: (state, action) =>
    produce(state, draft => {
      draft.val = action.payload
    })
}, initialState);

 

 

 

 

 

② src/store/modules/index.js

 

import test from "./test";
import { combineReducers } from "redux";

export default combineReducers({
  test
});

지금은 리듀서가 하나이지만 기능별로 늘어날 것이기 때문에

combineReducers를 이용해서 리듀서들을 합칠 겁니다

 

 

 

 

 

③ src/index.js

 

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

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

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

 

 

 

 

 

Redux 디버깅, 테스팅을 위한 크롬 확장 프로그램을 설치해 주세요

 

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

Redux DevTools

 

 

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

 

이 부분이 크롬 확장프로그램 설정입니다

 

 

 

 

 

 

yarn start

 

서버 다시 실행해 봅시다 

F12 개발자 도구에서 Redux를 선택해서 확인해 보세요

 

 

 

 

 

 

@@INIT, 그리고 State가 확인되시나요?

Redux 설정 완료입니다