【Redux】Redux Devtoolsを使う

はじめに

Redux Devtoolsはchrome extensionを追加しただけでは使えません。 アプリ側のコードに下記を仕込んでおくする必要があります。 extensionはchromeウェブストアにあります。

GitHub - zalmoxisus/redux-devtools-extension: Redux DevTools extension.

• Reducerだけの場合

const store = createStore(
  counterReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

• Middlewareを使う場合

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  counterReducer,
  composeEnhancers(applyMiddleware(thunk))
);

これでchromeの画面に表示され、操作を行うたびに状態が更新されていくのが確認できます。 別画面表示、もしくはchrome developer tool内のタブに表示できます。