前言

前兩篇學習了 Redux 的操作方法，雖然 Redux 替我們處理資料真的很方便，但是實際上是得經過 Component、Action、Reducer 三個環節，資料才會再回到 Component 身上等待下一次的 Dispatch。

看似很簡單的動作卻要繞上幾個地方才能夠完成，上一篇我們只是加上「新增待辦事項」，也許需求還有刪除修改、還要從資料庫 Get 資料回來（關於 Redux 的非同步會在下一篇說明），當網站的需求多了起來，有時候一個動作沒有反應，就會開始在各個檔案中尋找，瘋狂陷入「是 Dispatch 錯了嗎？」、「Action 指令是不是帶錯？」、「 Reducer 有正確改變 State 吧？ 」，然後在每個地方都下一堆 console.log 確認到底是哪裡錯了，直到找到問題，才又一個一個把 console.log 砍掉。

這時候都會想著，要是我可以確認 Redux 的處理狀況就好。

可以的！Redux 的改變，Logger 看得見！

前置準備

1. 文中的專案會以 Day12 的專案架構繼續講解，如果未跟到前一天的進度，可以從 GitHub 上 Clone 下來。
2. 一顆擁有學習熱忱的心。

使用方法

安裝 redux-logger

redux-logger 是 Redux 的一個 Middleware（中間件），關於 Middleware 下一節會在提到：

npm i --save redux-logger

設置 Middleware

先簡單解釋一下何謂 Middleware，如前言所說的「Component 會用 Dispatch 請 Store 執行 Reducer」

Middleware 會在 Store 和 Reducer 之間，所有透過 Dispatch 的執行都會經過 Middleware

而 redux-logger 的設置也很簡單，只需在 createStore 時，將它放入 Middleware 中就好。

打開專案中的 src/store/index.js：

import { applyMiddleware, createStore } from 'redux';
import logger from 'redux-logger';
import todoReducer from '../reducer/todolist';

const store = createStore(
  todoReducer, applyMiddleware(logger),
);

export default store;

上方的程式碼分成幾個部分：

1. 從 redux 中拿出 applyMiddleware。
2. 從 redux-logger 中取出 logger。
3. 將 logger 傳入 applyMiddleware 中創建 Middleware。
4. 在 createStore 時把創建的 Middleware 給入第二個參數。

設置好後，便能運行專案，新增事項時會看見在開發人員工具中有使用 Dispatch 的紀錄：

然後再將每個區塊展開，分別能看見 State 變更前、Dispatch 接收到的 Action 指令和參數、State 變更後的資料：

另外要注意的是，如果在 Redux 中用上了不只一個 Middleware，redux-logger 一定要設置在最後一個，例如：

const store = createStore(
  todoReducer, applyMiddleware(otherMiddleware, logger),
);

本文的範例程式碼會提供在 GitHub 上，歡迎各位參考：）

結尾

在開發人員工具中看到訊息的感覺不錯對吧！如此一來什麼時候 Dispatch 了什麼， State 的變化都很清楚，善用 redux-logger 就能讓開發或 deBug 的痛點變低！

如果文章中有任何問題，或是不理解的地方，都可以留言告訴我！謝謝大家！