React와 Redux 연결 설정

Siwoo Pak·2021년 5월 26일
0

React

목록 보기
3/14

설치해야 모듈

$ npm install redux react-redux redux-promise redux-thunk --save
  1. redux
  2. react-redux
  3. redux-promise
  4. redux-thunk

client/index.js 내용 수정 및 추가

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

// store는 객체밖에 처리 못해서 function과 promise를 처리하기 위해 redux-promise와 redux-thunk 모듈 설치
const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)


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


reportWebVitals();

/_reducer/ 에 index.js과 user.js 추가
index.js에

import { combineReducers} from 'redux';
//import user from './user_reducer';
const rootReducer = combineReducers({
    // user
})

export default rootReducer;
profile
'하루를 참고 인내하면 열흘을 벌 수 있고 사흘을 참고 견디면 30일을, 30일을 견디면 3년을 벌 수 있다.'

0개의 댓글