[React.js] Redux 기본설정

redux

react-redux

redux-promise

redux-thunk : 비동기 작업을 위해 필수, 객체가 아닌 함수 형태의 액션을 디스패치할 수 있게 해준다.

 

 

index.js설정

import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import rootReducer from './_reducers'
 
//middleware를 넣어준다
const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)
 
//스토어 
const store = createStoreWithMiddleware(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ &&
  window.__REDUX_DEVTOOLS_EXTENSION__()
)
 
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
 

 

import { combineReducers } from 'redux'
 
 
const rootReducer = combineReducers({
    
})
 
export default rootReducer

 

react-redux.js.org/introduction/quick-start

Quick Start | React Redux