【リアクト] && Reduxのデバッグツールを反応させます

A、ツールをデバッグ反応

1、インストールが反応し、開発者ツール、クロムアプリケーションストアをダウンロードし、ネットワークの制限の理由から、我々は、ダウンロードをインストールするには、Firefoxブラウザを使用することができます

、Firefoxブラウザのアドオンを開きます

B、インストール用の反応 - 開発者ツールを検索

開発ツールは、自動的に検出アセンブリ反応するが、WebPACKの-DEV-サーバモードで、WebPACKのが自動的に組み立てアセンブリ反応する障害検出をもたらす、IFRAMEを反応させる、回避策のWebPACK-DEV-サーバに配置されている--inlineに入れ反応モードに。

 

二、Reduxのデバッグツール

あなたは簡単に私たちのグローバルな状態を管理できるように順番に開発プロセスでより簡単に、我々は、状態のステータスをリアルタイムで表示し、一方でプロセスVUEの中規模のプロジェクト開発では、これは通常、vuex状態の管理ツールに使用しますブラウザでリアルタイムに変化だけでなく、国家とそのトリガー変異を確認できるようにVUE-devtoolは、ツールを使用します。開発プロセスでは、同じに反応することは、状態管理ツールも、vuexに似たVUEをReduxの、真である、と私たちは紹介したいと思い、今日はReduxの-デベロッパーツールを使用する開発プロジェクトの再来するには、ブラウザのツールを使用することを選択することができますですクロームプラグインは、Reduxの-デベロッパーツールによって、我々は明らかに倉庫ストアの現在の状態が親切左ビジュアルツールでは、我々はまた、トリガーアクションの変化を見ることができるか、ので見ることができます。このように、開発プロセスは、私たちは簡単にデバッグできます。

リファレンスは、インストールのデバッグを反応させます

import{createStore,applyMiddleware} from"redux";
importreducersfrom"./reducers/num"
importReduxThunkfrom"redux-thunk";
import{ composeWithDevTools} from'redux-devtools-extension'
conststore= createStore(reducers,composeWithDevTools(applyMiddleware(ReduxThunk)));
​
exportdefaultstore

 

 

当store中的数据进行修改的时候我们就可以通过调试工具进行查看