[Redux] 리덕스 개발자도구 적용하는 법 - 개발자도구에서 리덕스 스토어 확인하기

1. 크롬 확장 프로그램 설치

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

2. 터미널에서 익스텐션 설치

$ yarn add redux-devtools-extension

3. 파일에서 import하기

방법 1

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

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

방법 2

middleware와 함께 store를 생성할 때 다음과 같이 익스텐션 인자를 전달해준다.

ReactDOM.render(
  <React.StrictMode>
    <Provider store={createStoreWithMiddleware(
      Reducer,
      window.__REDUX_DEVTOOLS_EXTENSION__&&
      window.__REDUX_DEVTOOLS_EXTENSION__()
    )}>
      <BrowserRouter>
        <App/>
      </BrowserRouter>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Reference

• https://react.vlpt.us/redux/06-redux-devtools.html