Redux-devtools
Redux-開発ツール
Redux-Devtoolsは、Reduxアプリのデバッグプラットフォームを提供します。 タイムトラベルのデバッグとライブ編集を実行できます。 公式ドキュメントの機能の一部は次のとおりです-
- これにより、すべての状態とアクションのペイロードを検査できます。
- アクションを「キャンセル」することで、時間を遡ることができます。
- レデューサーコードを変更すると、各「ステージング」アクションが再評価されます。
- レデューサーがスローする場合、エラーを特定できます。また、アクション中にこれが発生しました。
- persistState（）ストアエンハンサーを使用すると、ページのリロード後もデバッグセッションを維持できます。
以下に示すように、Redux dev-toolsには2つのバリアントがあります-
*Redux DevTools* -パッケージとしてインストールし、以下に示すようにアプリケーションに統合できます-https://github.com/reduxjs/redux-devtools/blob/master/docs/Walkthrough.md#manual-integration
*Redux DevTools Extension* -Reduxと同じ開発者ツールを実装するブラウザー拡張機能は次のとおりです-https://github.com/zalmoxisus/redux-devtools-extension
Redux devツールの助けを借りて、アクションをスキップして時間に戻る方法を確認しましょう。 次のスクリーンショットでは、アイテムのリストを取得するために以前にディスパッチしたアクションについて説明しています。 ここでは、インスペクタータブにディスパッチされたアクションを見ることができます。 右側には、状態ツリーの違いを示す[デモ]タブがあります。
このツールを使い始めると、このツールに慣れるでしょう。 このReduxプラグインツールから実際のコードを記述することなく、アクションをディスパッチできます。 最後の行のDispatcherオプションは、これに役立ちます。 アイテムが正常にフェッチされる最後のアクションを確認しましょう。
サーバーからの応答としてオブジェクトの配列を受け取りました。 すべてのデータは、ページにリストを表示するために利用できます。 右上の状態タブをクリックして、ストアの状態を同時に追跡することもできます。
前のセクションでは、タイムトラベルのデバッグについて学習しました。 ここで、1つのアクションをスキップして、時間を遡ってアプリの状態を分析する方法を確認しましょう。 アクションタイプをクリックすると、「ジャンプ」と「スキップ」の2つのオプションが表示されます。
特定のアクションタイプでスキップボタンをクリックすると、特定のアクションをスキップできます。 アクションが起こらなかったかのように動作します。 特定のアクションタイプでジャンプボタンをクリックすると、そのアクションが発生したときの状態に移動し、残りのすべてのアクションを順番にスキップします。 これにより、特定のアクションが発生したときに状態を保持できます。 この機能は、アプリケーションのデバッグおよびエラーの検出に役立ちます。
最後のアクションをスキップし、バックグラウンドからのすべてのリストデータが消えました。 アイテムのデータが到着しておらず、アプリにページにレンダリングするデータがない時間に戻ります。 実際には、コーディングが簡単になり、デバッグが容易になります。
