[Redux] 노드 리액트 Redux 기본 구조 만들기!

- Setting up Redux!

$ npm i redux react-redux redux-promise redux-thunk --save

 

여기서 redux-promise, redux-thunk 는 간단히 말하면 redux 를 잘 쓸 수 있도록 도와주는 역할이다.

 

Redux 는 store 안에서 모든 state 를 관리하게 되는데 

Dispatch 할 때, action 은 객체 형식이어야 함 ,, 그런데 언제나 객체 형식으로 받는게 아니라 promise, function 형태로 받을 때가 있음

그렇기 때문에 redux-promise, redux-thunk 를 middleware로 받는 이유는 위와 같은 원인 때문에 에러없이 

진행하기 위해서는 필수적으로 설치해야 함!

 

* redux extension - 다운받기

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko 

Redux DevTools

 

import { provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import Reducer from './_reducers';

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')
);