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

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

Redux DevToolsとは

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

インストール

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

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja

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

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

状態変化の可視化

Reduxのテンプレートを作成

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

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

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

yarn start

基本的な機能

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

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

Action

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

State

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

その他

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

左上のメニュー

Pause recording

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

Persist state history

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

Lock changes

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

まとめ

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

ではまた。