boiler-plate : 리덕스를 설정하자

오늘은 리액트의 핵심이라고 할 수도 있는 리덕스를 정리해보았다.

1. 라이브러리 설치

yarn add redux react-redux redux-promise redux-thunk

여러 개를 한 번에 설치하고 싶을 때는 스페이스로 구분을 하여 명령어를 한 번에 할 수 있다. 여기서 redux-promise, redux-thunk는 redux를 오류를 최소화하기 위해 추가적으로 설치하는 middleware다.

 

2. 리덕스와 어플리케이션을 감싸줄 provider 개선하기

// client > src > index.js

 // 생략
import {Provider} from 'react-redux';
import 'antd/dist/antd.css';
import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';

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

ReactDOM.render(
  <Provider store={createStoreWithMiddleware}>
    <App />
  </Provider>,
  document.getElementById('root')
);

reportWebVitals();

먼저 어플리케이션 전체에 Provider로 감싸줌으로써 react-redux를 좀 더 원활하게 사용할 수 있게 설정한다. 다음에는 store을 만들어준다.

 

3. reducer 만들기

// client > src > _reducers > index.js

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
})

export default rootReducer;

인증에 대한 리듀서 기능을 여기다가 앞으로 추가할 예정이다. combineReducers를 이용하여 합쳐서 rootReducer로 보내주는 역할을 한다.

4. reducer 적용하기

// client > src > index.js

 // 생략
import Reducer from './_reducers';

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

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(Reducer)}>
    <App />
  </Provider>,
  // 생략

 

 

 

5. Redux Extension을 설치 및 적용하기

먼저 chrome에서 다음 확장자를 추가를 한다.

Add Redux DevTools from chrome

그리고 다음과 같은 문구를 추가한다.

// client > src > index.js

 // 생략
ReactDOM.render(
  <Provider store={createStoreWithMiddleware(Reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ &&
    window.__REDUX_DEVTOOLS_EXTENSION__()
  )}>
    <App />
  </Provider>,
  // 생략

이렇게 하면 리덕스를 연결이 완료가 된 것이다.

 

리덕스는 매번 해도 매번 어렵네 그래도 어느 정도 익숙함과 머릿속에 조금 들어오는 게 달라졌다.

다음에는 더 정교한 이해도를 습득을 위해 오늘도 달리자!