[TIL] Redux DevTools

Redux DevTools

Chrom Extension인 Redux DevTools를 사용해보자

 

1. Chrome 웹 스토어에서 Redux DevTools를 검색해 추가해준다

2. 다음 명령어로 프로젝트에 redux-devtools-extension을 설치해준다

$ yarn add redux-devtools-extension

3. index.js에 다음과 같이 추가해준다

import { composeWithDevTools } from 'redux-devtools-extension';
 
const store = createStore(rootReducer, composeWithDevTools());
 
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

4. 개발자 도구(F12)에 Redux가 추가된다!

 

이제 해당 탭에서 Redux의 Action 값, State 값, Diff(차이점) 등을 실시간으로 체크할 수 있다

 

액션이 실행될 때마다 바로바로 갱신된다!

현재는 Redux 전용 콘솔 정도로 활용하고 있는데, 그 외의 기능들은 아래 글을 참고 🔽

Redux 개발을 더 편하게, Redux-Devtools