2-1. Redux 개발자 도구 사용하기

멀티카운터 만들기를 진행하기 전에, 리덕스에서 액션이 dispatch 될 때마다 로그를 보고, 또 그 전 상태로 돌아갈수도 있게 해주는 리덕스 개발자도구에 대해서 알아보겠습니다.

확장 프로그램 설치

우선, 리덕스 개발자도구를 사용하려면 크롬이나 파이어폭스를 사용하셔야합니다. 여기를 눌러 크롬 확장프로그램을 설치하세요. (파이어폭스는 여기)

설치를 하고 나면, 개발자도구를 열었을 때, 개발자도구의 상단 탭의 우측에 Redux 가 나타나게 됩니다.

하지만, 설치를 한다고해서 바로 사용 할 수 있는것은 아닙니다. 프로젝트에서 따로 설정을 해야, 개발자도구에서 리덕스의 스토어에 접근을 할 수 있게 됩니다.

프로젝트에서 개발자도구를 위한 설정하기

src 디렉토리의 index.js 파일을 열어서 스토어를 생성하는 코드를 다음과 같이 수정하세요.

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
import './index.css';

// Redux 관련 불러오기
import { createStore } from 'redux'
import reducers from './reducers';
import { Provider } from 'react-redux';

// 스토어 생성
const store = createStore(reducers, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

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

그러면, 이제 액션이 발생할때마다 차이도 쉽게 확인 할 수 있고, 현재 상태도 조사할수있습니다.