React) Redux DevTools 사용하기

Redux DevTools 설치

Redux DevTools는 규모가 큰 웹/어플리케이션의 효율적인 상태 관리를 위해 사용되는 redux를 위한 개발자 도구입니다.

이는 아래 링크에서 크롬 익스텐션을 설치하여 사용할 수 있습니다. 

Redux DevTools

---

React 프로젝트에서 Redux DevTools 사용

아래 명령어로 패키지를 설치합니다.

npm install redux-devtools-extension --save

 

redux store를 createStore를 통해 선언하는 파일에 componseWithDevTools를 임포트해오고,

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

createStore함수의 파라미터에 composeWithDevTools() 함수를 추가로 전달합니다. 

const store = createStore(rootReducer,composeWithDevTools());

/* src/index.js */

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './modules';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(rootReducer,composeWithDevTools());

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

---

크롬 브라우저를 열고, f12를 눌러 개발자 도구를 열어보면 'Redux'라는 새로운 탭이 생긴것을 확인할 수 있습니다. 

이를 클릭해보면 다음과 같이 Redux DevTools창이 나타납니다.