iT邦幫忙

2022 iThome 鐵人賽

DAY 15
0
Modern Web

前端技術研究系列 第 15

Redux Saga 基礎認識

  • 分享至 

  • xImage
  •  

還記得先前在介紹 Redu-toolkit 時有稍微提到的 Redux saga 吧
今天就要來介紹啦~

官網介紹:

Redux-Saga 是直觀的redux side effect (例如非同步獲取數據,訪問瀏覽器緩存) 管理器,更容易管理、測試,以及執行更有效率。

優點:

  1. 解決了redux 非同步的問題。
  2. 可讀性較佳:可以統一管理API,閱讀上也類似同步的寫法。不同redux-thunk 的架構,將邏輯和 API包在 action中,會使action 較難維護和閱讀。
  3. 可測試性: redux-saga 設計上就考慮讓開發者也容易輕鬆的做單元測試(Error handling)。
  4. 不需另外客製 middleware。他本身就是一個很符合使用者直覺操作的Middleware

流程圖

Redux-Saga 在 Redux 中是以 Middleware (中間件)存在的,因此它能夠在程式調用 Store 的時候處理 Async Action,原先被 dispatch 觸發的 Method(方法) 從 Reducer 變成 Redux - Saga 。

而Redux-Saga 成為 Component 及 Reducer 之間溝通的橋樑。

如何執行:

  • 建立一個 Saga middleware 與要執行的 Saga
  • 連結 Saga middleware 到 Redux store

明天再來介紹 saga 裡的 Effect 吧~


上一篇
React 生命週期 下集 - 利用 Hook 呈現
下一篇
Redux Saga 基礎 Effect (上集)
系列文
前端技術研究30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言