[react] FE 세팅하기 redux

Redux DevTools 설치

크롬 웹 스토어 바로가기

디펜던시 설치

cd client
npm i redux react-redux redux-promise redux-thunk --save

디렉토리, 파일 생성

cleint/src/_reducers 디렉토리 생성
cleint/src/_reducers/index.js 생성
cleint/src/_reducers/user_reducer.js 생성

cleint/src/_reducers/index.js

import {combineReducers} from 'redux'
import user from './user_reducer'

const rootReducer = combineReducers({
    user
})

export default rootReducer

cleint/src/index.js 수정

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './style.css';
import {applyMiddleware, createStore} from 'redux'
import {Provider} from 'react-redux'
import promiseMiddleware from 'redux-promise'
import ReduxThunk from 'redux-thunk'
import Reducer from './_reducers'

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)

ReactDOM.render(
  <React.StrictMode>
    <Provider
      store={createStoreWithMiddleware(Reducer,
          window.__REDUX_DEVTOOLS_EXTENSION__ &&
          window.__REDUX_DEVTOOLS_EXTENSION__()
        )}
    >
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);