[redux] - store 생성

redux 설치
npm install redux react-redux redux-promise redux-thunk --save

설치 대상

1. redux
2. react-redux
3. redux-promise
   • redux middleware
4. redux-thunk
   • redux middleware

redux-promise / redux-thunk 사용하는 이유
이전 글에서는 객체로 이루어진 액션을 전달받아 스토어를 업데이트한다고 했다.
하지만 스토어에서는 객체형식의 액션을 받는 것이 아닌 promise형식, function형태로 받을 수 있다.
promise, function형식으로 올 경우 redux store는 받지 못하므로 redux-promise / redux-thunk를 이용한다.

redux-promise
dispatch한테 어떻게 promise가 왔을 때 대처를 알려준다.

redux-thunk
dispatch한테 어떻게 function을 받는 방법을 달려준다.

 

redux 적용
client > index.js 연결

1. <APP />을 Provider로 감싸준다.

   • // client > src > index.js
     
     import { Provider } from "react-redux";
     
     ReactDOM.render(
         <Provider>
             <App />
         </Provider>
         ,document.getElementById("root")
     );

2. store 생성한다. (createStore)
3. redux-promise, redux-thunk 포함시킨다.

   • // client > src > index.js
     
     import { Provider } from "react-redux";
     import { applyMiddleware, createStore } from "redux";
     import promiseMiddleware from "redux-promise";
     import ReduxThunk from "redux-thunk";
     import Reducer from "./_reducer";
     
     const createStoreWithMiddleware = applyMiddleware(
         promiseMiddleware,
         ReduxThunk
     )(createStore);
     
     ReactDOM.render(
         <Provider
             store={createStoreWithMiddleware(
                 Reducer,
                 window.__REDUX_DEVTOOLS_EXTENSION__&&
                 window.__REDUX_DEVTOOLS_EXTENSION__()
             })  
         >
             <App />
         </Provider>,
         document.getElementById("root")
     );

4. reducer 설정 => reducer를 통해 state 변경한다.

   • // client > src > _reducer > index.js
     
     import { combineReducers } from "redux";
     import user from "./user_reducer";
     
     const rootReducer = combineReducers({
         user,
     });
     
     
     export default rootReducer;

   • combineReducer
     • 여러 reducer(User Reducer, Post Reducer, Comment Reducer 등)를 Root Reducer에서 하나로 합친다.
5. redux devtools 설치 및 설정한다.
   • chrome 웹 스토어에서 "Redux DevTools"설치 후 3번 코드처럼(window ..~~)설정해도 되고
   • 라이브러리를 다운받아 설정할 수 있다.
     •  npm install redux-devtools-extension --save

   • // client > src > index.js
     
     
     import { Provider } from "react-redux";
     import { applyMiddleware, createStore } from "redux";
     import promiseMiddleware from "redux-promise";
     import ReduxThunk from "redux-thunk";
     import Reducer from "./_reducers";
     import { composeWithDevTools } from "redux-devtools-extension";
     
     const createStoreWithMiddleware = applyMiddleware(
         promiseMiddleware,
         ReduxThunk
     )(createStore);
     
     ReactDOM.render(
         <Provider store={createStoreWithMiddleware(Reducer, composeWithDevTools())}>
             <App />
         </Provider>,
         document.getElementById("root")
     );