一個好用的查看Angular應用ngrx狀態的Chrome擴展：Redux devTools

Redux DevTools：

https://chrome.google.com/web...

安裝完畢後，在Chrome開發者工具裏會多出一個Redux面板：

以及在Chrome右上角的擴展工具欄裏，會點亮Redux DevTools對應的圖標。

此時在redux面板裏便可方便的查看ngrx相關的state和action：

能夠輸入關鍵字進行過濾，好比查看和Currency加載相關的action：

action包含type和payload：

把這個type複製下來，便可到對應源代碼里根據關鍵字進行搜索：
[Site-context] Load Currencies Success

Load Product Data時，state裏的loading標誌位是true：

加載成功後，loading從true變爲false，success從false變爲true：

state欄能看到當前action觸發時，應用的state狀態，很方便：

更多Jerry的原創文章，盡在："汪子熙":