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解耦,對請求中,請求失敗都有完善的處理,缺點是代碼量較大