iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 15
2

前言

前兩篇學習了 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 的痛點變低!

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


上一篇
Day13 | React 的快樂小夥伴 - Redux 事件處理篇
下一篇
Day15 | React-Saga 見一次就愛上的 async flows
系列文
在 React 生態圈內打滾的一年 feat. TypeScript31

尚未有邦友留言

立即登入留言