【React】storeの状態を監視する「Redux Devtools」の導入方法

Reactにおいて、Reduxを用いて開発を進めるにあたり、storeの状態を都度確認できると便利です。Udemy講座「 Modern React with Redux [2020 Update] 」（ https://www.udemy.com/course/react-redux/ ）にて、このような機能を持つ「Redux Devtools」というChromeの拡張機能があることを知ったので、共有させていただきます。（この講座は、Reactの知識だけでなく、こういったTipsなども教えてくれます。本では学べないことも多く、Udemyの講座は新たな学びにも有効だと思います。）

「Redux Devtools」の機能

store内の状態を監視し、stateの内容を視覚的に確認することができます。

導入方法

chromeウェブストア（https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja）から拡張機能をchromeに追加することで導入できます。

次に、自分のプロジェクトのコードで、storeの宣言をしている箇所に次のコードの3行目を加えます。

 const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

ReduxThunk等のmiddlewareを使っている場合は次のようにします。

import { createStore, applyMiddleware, compose } from 'redux';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
    applyMiddleware(...middleware)
));

尚、自分のプロジェクトだけでなく、企業のサイトなどでもこのツールでstateを見ることができる場合があります。その場合はアイコンの色がモノクロからカラーに変化します。