applyMiddleware, compose를 활용하여 enhancer 만들기 사용하기

https://redux.js.org/api/createstore

 

createStore와 관련된 문서를 보면 다음과 같이 작성되어 있습니다.

createStore(reducer, [preloadedState], [enhancer])

 

enhancer란 말 그대로 redux의 기능을 도와주는 미들웨어나 데브 툴즈와 같은 것들을 말합니다. 

 

 

🚀 applyMiddleware란 무엇인가

 

https://redux.js.org/api/applymiddleware

https://redux.js.org/api/compose

 

단순히 이렇게 작성함으로써 미들웨어를 사용할 수 있게 됩니다. 그러나 나중에 기술하겠지만 enhancer를 구성해서 연결시키는 게 더 좋습니다.

// 일반적으로 store를 생성하는 법
const store = createStore(reducer);

// applyMiddleware를 활용하여 미들웨어를 거쳐가도록 하는 store 생성법
const store = createStore(RootReducer, applyMiddleware(promiseMiddleware, ReduxThunk))

 

 

🚀 redux-thunk, redux-promise를 미들웨어로 사용해보자

 

미들웨어란, 액션과 리듀서 사이에 존재합니다. 특정 액션을 가하고 리듀서가 처리하긱 전에 작업을 처리합니다.

 

 

일반적으로 React에서 redux를 사용한다고 하면 다음과 같이 4개를 사용합니다.

redux-thunk나 promise는 미들웨어입니다.

thunk 대신 redux-saga를 쓰는 경우도 있지만 우선은 간단하게 thunk와 promise를 사용합시다.

redux
react-redux
redux-thunk : dispatch에게 함수 형식을 대처하게 끔 함
redux-promise : dispatch에게 프로미스 형식을 대처하게 끔 함

 

일반적인 redux에서는 객체 형태만을 받아들이지만 프로미스와 함수 형식을 대처할 수 있도록 미들웨어로 처리를 해서 다음과 같이 store를 만들어 줍니다.

 

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

// redux things
import { Provider } from "react-redux";
import { applyMiddleware, createStore } from "redux";

// 다운로드 받은 두 패키지
import promiseMiddle from "redux-promise";
import ReduxThunk from "redux-thunk";

// create store!
const store = createStore(RootReducer, applyMiddleware(promiseMiddleware, ReduxThunk))

// render it!
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

 

 

🚀 compose를 사용해 enhancer를 만들어보자.

 

Next에서 사용한 코드라서 withRedux 같은 게 붙긴 했지만 기본적으로 compose는 순차적으로 함수를 적용해나가는 gulp의 pipe 같은 역할을 입니다. 미들웨어를 사용할 때 적용해주면 좋습니다.

export default withRedux((initialState, options) => {
  const middlewares = [];
  const enhancer = compose(applyMiddleware(...middlewares));
  const store = createStore(Rootreducer, initialState, enhancer);
  return store;
})(MyApp);

 

위의 예시가 Next라서 꺼림칙해서 공식 문서의 예시를 제 입맛에 맞게 아주 조금 고쳐봤습니다.

그러니까 applyMiddlewae를 처리해서 다 넘어가고 DevTools를 사용하게 되는 것이죠.

import { createStore, applyMiddleware, compose } from 'redux'
import promiseMiddle from "redux-promise";
import ReduxThunk from "redux-thunk";
import DevTools from './containers/DevTools'
import reducer from '../reducers'

const store = createStore(
  reducer,
  compose(applyMiddleware(promiseMiddle, ReduxThunk), DevTools.instrument())
)