[Develop/React] createStrore applyMiddleware와 devToolsExtension 함께 사용

createStrore applyMiddleware와 devToolsExtension 함께 사용

리엑트에서 리덕스 개발자 도구 사용을 위해서 store 생성 시 devToolsExtension 설정을 해줘야 했다.

설정에 대한 내용을 모른다면 아래 포스팅을 참고

https://hoons-up.tistory.com/16

[Develop/React] 리덕스 개발자 도구 사용

소스 미들웨어와 함께 사용하면서 개발자 도구와 함께 사용하는 방법을

알게 되어 포스팅으로 기록한다.

 

리덕스 오픈소스 미들웨어도 createStrore를 생성하면서 함께 등록하는데 미들웨어 설정과 개발자 도구를 사용하기 위한

설정을 같이하려면 compose를 사용한다.

 

compose는 함수를 오른쪽에서 왼쪽으로 조합하는 함수형 프로그래밍 유틸리티로, Redux에는 편리함을 위해

포함되었다.

 

따라서 아래와 같이 설정하면 미들웨어와 개발자 도구 설정을 함께 사용할 수 있다.

import modules from './modules';
import { createStore, compose, applyMiddleware } from 'redux';

const store = createStore(
  modules, 
  compose(
    applyMiddleware(logger),
    window.devToolsExtension && window.devToolsExtension()
  ));