Redux-saga 基礎學習

Redux-saga 基礎學習

參考：

https://juejin.im/post/58eb4100ac502e006c45d5c9

https://yanqiw.github.io/react/2017/03/05/redux-saga.html

http://www.cnblogs.com/libin-1/p/6858558.html 什麼是Redux-saga

它是一個用於管理 Redux 應用非同步作業的中介軟體，通過建立 Sagas 將所有的非同步作業邏輯收集在一個地方集中處理，像一個分散的支線在你的應用中單獨負責解決非同步action（類似於後台啟動並執行進程），從而代替 redux-thunk 中介軟體。

 

邏輯存在兩個地方：

l  Reducers 負責處理 action 的 state 更新。

l  Sagas 負責協調那些複雜或非同步操作。 重要概念 副作用：

在action觸發reduser之後執行的一些動作，這些動作包括但不限於，串連網路，io讀寫，觸發其他action。因為Sage的副作用是通過redux的action觸發的，每一個action，sage都會像reduser一樣接收到。並且通過觸發不同的action, 我們可以控制這些副作用的狀態，例如，啟動，停止，取消。所以，我們可以理解為Sage是一個可以用來處理複雜的非同步邏輯的模組，並且由redux的action觸發。

redux-saga提供了幾種產生副作用的方式：主要用到了有兩種takeEvery和takeLates。

takeEvery：會在接到相應的action之後不斷產生新的副作用。 比如，做一個計數器按鈕，使用者需要不斷的點擊按鈕，對後台資料更新，這裡可以使用takeEvery來觸發。

takeLatest：在相同的action被觸發多次的時候，之前的副作用如果沒有執行完，會被取消掉，只有最後一次action觸發的副作用可以執行完。

 

  Reduex能做：

l  調用一個非同步函數；

l  發起一個 action 到 Store；

l  啟動一個背景工作或者等待一個滿足某些條件的未來的 action。

  Effects

是一個 javascript 對象，裡麵包含描述非同步動作的資訊，可以通過 yield 傳達給 sagaMiddleware 執行。

在 redux-saga 世界裡，所有的 Effect 都必須被 yield 才會執行

  常用API call

用來調用非同步函數，將非同步函數和函數參數作為call函數的參數傳入，返回一個js對象。saga引入他的主要作用是方便測試，同時也能讓我們的代碼更加正常化。

call操作是阻塞的，只有等promise回來後才能繼續執行 fork

當調用fork啟動一個任務時，該任務在後台繼續執行，從而使得我們的執行流能繼續往下執行而不必一定要等待返回。

 

  put

作用和 redux 中的 dispatch 相同。

yield put({ type: 'CLICK_BTN' });

  select

作用和 redux thunk 中的 getState 相同。

const id = yield select(state =>state.id);

調用put方法後，saga內部會分發action通知Store更新state。

  take

等待 redux dispatch 匹配某個(由使用者決定) pattern 的 action 。在執行順序執行到take語句時才會相應action。

在genetator中使用take語句等待action時，generator被阻塞，等待action被分發，然後繼續往下執行。

先等待一個按鈕點擊的 action ，然後執行按鈕點擊的 saga：

while (true) {

 yield take('CLICK_BUTTON');

 yield fork(clickButtonSaga);

}

 

  阻塞調用和無阻塞調用

redux-saga 可以用 fork 和 call 來調用子 saga ，其中 fork 是無阻塞型調用，call 是阻塞型調用。

  使用例子：

在使用者提交表單的時候，我們想要做如下事情：

l  校正一些輸入資訊 (簡單， 寫在組件裡)

l  彈起提示資訊（寫一個公用的提示資訊模組，這樣別的頁面引入就可以用了）

l  提交後端服務 （直接組件裡面fetch）

l  拿到後端返回狀態 （promise實現）

l  隱藏提示資訊 (給組建加一個控制屬性)

l  更新redux store（dispatch咯。。。）

但是一旦涉及到多個表單提交，代碼就會很長，重複代碼很多。

用了redux-saga之後：

form組件觸發提交action (一行簡單的dispatch)

reducer這個action不需要自己處理

saga提交表單的副作用開始執行 （監聽到觸發副作用的action）

l  校正一下

l  通知顯示層彈起資訊框 （dispatch一下變更控制資訊框彈起的store）

l  提交表單 (yield一個promis，yield是javascriptgenerator的文法，稍後有介紹)

l  拿到後端返回狀態

l  更新redux store(dispatch一下)

 

使用了Saga後，react只負責資料如何展示，redux來負責資料的狀態和綁定資料到react，而Saga處理了大部分複雜的商務邏輯。