React- 리덕스 개발자도구 적용하기

리덕스 개발자도구 적용하기

리덕스 개발자 도구를 사용하면 현재 스토어의 상태를 개발자 도구에서 조회 할 수 있고 지금까지 어떤 액션들이 디스패치 되었는지 그리고 액션에 따라 상태가 어떻게 변화했는지 확인 할 수 있다. 추가적으로 액션을 직접 디스패치 할 수도 있다.

 

우선 크롬 웹 스토어 에서 확장 프로그램을 설치해준다.

 

그 다음에는 프로젝트에 redux-devtools-extension을 설치한다.

 

npm install redux-devtools-extension

 

그 다음에는 index.js를 다음과 같이 수정하시면 적용이 끝난다.

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './modules';
import { composeWithDevTools } from 'redux-devtools-extension'; // 리덕스 개발자 도구

const store = createStore(rootReducer, composeWithDevTools()); // 스토어를 만든다.
// composeWithDevTools 를 사용하여 리덕스 개발자 도구 활성화

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

reportWebVitals();

 

실행 결과