Redux DevToolsを使って、状態変化のプロセスを可視化する

北川慶太

2023.01.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。データアナリティクス事業本部サービスソリューション部の北川です。

Redux DevToolsとは

Redux DevToolsは、Reduxの開発に役立つブラウザ拡張機能の一つで、Reduxプロジェクト内の状態変化の過程を可視化することができます。Reduxだけでなく、状態変化を行うライブラリで利用することができます。Reduxプロジェクトのデバック作業に、非常に便利だと思います。

こちらから、拡張機能をインストールします。

以下のアイコンが追加されます。使用可能な状態の時は、アイコンが緑色になります。クリックするとツールが立ち上がります。

また、chromeのデベロッパーツールでReduxの項目を増えているので、そちらからも使用することができます。

Reduxの公式テンプレートを使用して、devtoolsを使ってみます。

npx create-react-app sample_redux --template redux-typescript

ローカル環境を立ち上げます。

yarn start

stateの状態が更新された時に、どのアクションが実行されたかを履歴として記録します。

履歴にホバーすると、Jumpと、Skipを実行することができ、Jumpでホバーした履歴まで巻き戻ることができ、Skipでその履歴(アクション)を無視し、飛ばすことができます。

右側のメニューのActionで、アクションに渡されたpayload、typeを確認できます。Tree, Chart, Raw形式を選択できます。

左側の履歴内から、指定したアクション時点でのstateの値を表示します。

他にも、Diffで変更前後のstateの差分を確認したり、Traceでアクション時に関与した関数を確認できます。

オンにしている間、実行されたアクションを履歴として記録します。デフォルトでオンになっています。

アクションの履歴を永続化し、stateの値を保持します。試しにstateを変更した状態でリロードしても、状態が保持されていることが確認できます。

状態の変更をロックします。

今回は、Redux DevToolsの機能を一通り使ってみました。履歴を巻き戻す機能などを利用することにより、デバック作業の効率化に繋がると思いますので、機会があれば使ってみてください。

ではまた。