爲什麼要用redux-saga

redux

redux是 JavaScript 狀態容器,提供可預測化的狀態管理。

應用中所有的 state 都以一個對象樹的形式儲存在一個單一的 store 中。 惟一改變 state 的辦法是觸發 action,一個描述發生什麼的對象。 爲了描述 action 如何改變 state 樹,你需要編寫 reducers。

你應該把要做的修改變成一個普通對象,這個對象被叫做 action,而不是直接修改 state。然後編寫專門的函數來決定每個 action 如何改變應用的 state,這個函數被叫做 reducer。

redux 有且僅有一個 store 和一個根級的 reduce 函數(reducer)。隨着應用不斷變大,你應該把根級的 reducer 拆成多個小的 reducers,分別獨立地操作 state 樹的不同部分,而不是添加新的 stores。這就像一個 React 應用只有一個根級的組件,這個根組件又由很多小組件構成。

redux-saga

redux-saga 是一個用於管理應用程序 Side Effect(副作用,例如異步獲取數據,訪問瀏覽器緩存等)的 library,它的目標讓副作用管理更容易,執行更高效,測試更簡單,在處理故障時更容易

可以想像爲,一個 saga 就像是應用程序中一個單獨的線程,它獨自負責處理副作用。 redux-saga 是一個 redux 中間件,意味着這個線程可以通過正常的 redux action 從主應用程序啓動,暫停和取消,它能訪問完整的 redux state,也可以 dispatch redux action。

redux-saga 使用了 ES6 的 Generator 功能,讓異步的流程更易於讀取,寫入和測試。(如果你還不熟悉的話,這裏有一些介紹性的鏈接) 通過這樣的方式,這些異步的流程看起來就像是標準同步的 Javascript 代碼。(有點像 async/await,但 Generator 還有一些更棒而且我們也需要的功能)。

你可能已經用了 redux-thunk 來處理數據的讀取。不同於 redux thunk,你不會再遇到回調地獄了,你可以很容易地測試異步流程並保持你的 action 是乾淨的。

redux-saga與其他redux中間件比較

  • redux-thunk 的缺點在於api層與store耦合,優點是可以獲取到各個異步操作時期狀態的值,比較靈活,易於控制
  • redux-promise的優點是api層與store解耦,缺點是對請求失敗,請求中的情形沒有很好的處理
  • redux-saga 的優點是api層與store解耦,對請求中,請求失敗都有完善的處理,缺點是代碼量較大

經典前端面試題每日更新,歡迎參與討論,地址:https://github.com/daily-interview/fe-interview


更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目,請關注微信公衆號——全棧弄潮兒

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章