Redux - 開發工具

Redux-Devtools 為我們提供了 Redux 應用的除錯平臺。它允許我們執行時光倒流除錯和即時編輯。官方文件中的一些功能如下：

• 它允許你檢查每個狀態和 action 的 payload。

• 它允許你透過“取消” action 回到過去。

• 如果你更改 reducer 程式碼，每個“暫存”的 action 將被重新評估。

• 如果 reducers 丟擲錯誤，我們可以識別錯誤以及發生錯誤的 action。

• 使用 persistState() store enhancer，你可以跨頁面重新載入持久化除錯會話。

Redux 開發工具有兩個變體，如下所示：

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 開發工具跳過 action 並回到過去。下面的截圖解釋了我們之前為了獲取專案列表而分發的 action。在這裡，我們可以看到在檢查器選項卡中分發的 action。在右側，你可以看到 Demo 選項卡，它顯示了狀態樹的差異。

當你開始使用這個工具時，你就會熟悉它。你無需編寫實際程式碼，只需從這個 Redux 外掛工具中就可以分發一個 action。最後一行的“分發器”選項將幫助你做到這一點。讓我們檢查一下最後成功獲取專案的 action。

我們從伺服器收到了一個物件陣列作為響應。所有資料都可用於在我們的頁面上顯示列表。你也可以透過點選右上角的“狀態”選項卡來同時跟蹤 store 的狀態。

在之前的章節中，我們學習了時間旅行除錯。現在讓我們檢查一下如何跳過一個 action 並回到過去來分析應用程式的狀態。當你點選任何 action 型別時，會出現兩個選項：“跳轉”和“跳過”。

透過點選某個 action 型別的“跳過”按鈕，你可以跳過特定的 action。它的作用就像該 action 從未發生過一樣。當你點選某個 action 型別的“跳轉”按鈕時，它會將你帶到該 action 發生時的狀態，並跳過序列中所有剩餘的 action。這樣你就可以保留特定 action 發生時的狀態。此功能在除錯和查詢應用程式中的錯誤時非常有用。

我們跳過了最後一個 action，所有來自後臺的列表資料都消失了。它回到了專案資料尚未到達的時候，我們的應用程式沒有資料可以在頁面上渲染。它實際上使編碼更容易，除錯也更容易。