Redux DevTools와 연동 방법(브라우저 개발자 도구)

Redux DevTools와 연동 방법(브라우저 개발자 도구)

1️⃣ 크롬 웹 스토어에서 Redux DevTools 추가

 

2️⃣ redux-devtools 설치

npm i redux-devtools-extension

 

3️⃣ store에 연동하는 코드 작성하기

import { applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const configureStore = () => {
    const middlewares = [];
    const enhancer = process.env.NODE_ENV === 'production'
    ? compose(applyMiddleware(...middlewares))			//배포용
    : composeWithDevTools(applyMiddleware(...middlewares))  	//개발용
    const store = createStore(reducer, enhancer);
    return store;
};