redux-saga學習筆記

時間 2019-12-07

標籤 redux saga 學習筆記简体版

原文原文鏈接

在學習redux-saga以前，咱們必須瞭解ES6 Generators [ES6 Generators]html

介紹

中間件：將具體業務和底層邏輯解耦的組件。redux中，中間件就是一個函數，對store.dispatch方法進行了改造，在發出 Action 和執行 Reducer 這兩步之間，添加了其餘功能。 redux

redux應用中最經常使用的兩種異步流處理方式： redux-thunk，redux-sagapromise

redux-saga 是一個用於管理 Redux 應用異步操做（Side Effects。譯註：直譯成「反作用」不太通順，因此這裏譯爲「異步操做」更好理解）的中間件（又稱異步 action）。 redux-saga 經過建立 Sagas 將全部的異步操做邏輯收集在一個地方集中處理，能夠用來代替 redux-thunk 中間件。
bash

它具備以下特性：
babel

集中處理 redux 反作用問題。架構
被實現爲 generator 。併發
類 redux-thunk 中間件。app
watch/worker（監聽->執行）的工做形式。異步

如何使用

建立與運行
測試（遍歷 generator 並對它的值（gen.next() // => { done: ..., value: ... } ）作 deepEqual 測試）

redux-saga [官方文檔]有詳細的使用說明

redux-saga [中文文檔]

概念

使用 Saga 輔助函數

（經常使用）

Middleware API
- createSagaMiddleware(...sagas)
- middleware.run(saga, ...args)
Saga Helpers
- takeEvery(pattern, saga, ...args) ：接受Action，而且觸發某個方法（一個 Generator function）實例同時啓動
- takeLatest(pattern, saga, ..args) ：屢次觸發，去最後一次
Effect creators
- take(pattern) ：建立一條 Effect 描述信息，指示 middleware 等待 Store 上指定的 action。 Generator 會暫停，直到一個與 pattern 匹配的 action 被髮起。
- put(action) ： put(action) 用於觸發 action，功能上相似於dispatch。
- fork(fn, ...args) ：建立一條 Effect 描述信息，指示 middleware 以無阻塞調用方式執行 fn。fork 相似於 call，能夠用來調用普通函數和 Generator 函數。但 fork 的調用是無阻塞的，在等待 fn 返回結果時，middleware 不會暫停 Generator。相反，一旦 fn 被調用，Generator 當即恢復執行。 fork 與 race 相似，是一箇中心化的 Effect，管理 Sagas 間的併發。
- call(fn, ...args) ：cal阻塞型調用，有阻塞地調用 saga 或者返回 promise 的函數。
- join(task)：建立一個效果描述，指示中間件等待先前分叉的任務的結果。
- cancel(task)：是一個無阻塞 Effect。也就是說，Generator 將在取消異常被拋出後當即恢復。
- select(selector, ...args) ：做用和 redux thunk 中的 getState 相同。
```
const id = yield select(state => state.id);複製代碼
```
Effect combinators
- race(effects) ：rece Effect提供了一個方法，在多個Effects之間觸發一個競賽。在race Effect中，全部參與競賽的任務，除了優勝者，其餘任務都會被取消
Interfaces
- Task ：Task 接口指定了經過 fork，middleware.run 或 runSaga 執行 Saga 的結果。

redux-saga API詳解能夠查看 [API 參考]

聲明式 Effects

Effect 是一個簡單的對象，該對象包含了一些給 middleware 解釋執行的信息。能夠經過使用 effects API 如 fork，call，take，put，cancel 等來建立 Effect。（ redux-saga [API 參考]）

觸發一個action 到 reducer的過程當中，如 yield call(delay, 1000)即 yield 了下面的對象，call 建立了一條描述結果的信息，而後，redux-saga middleware 將確保執行這些指令並將指令的結果返回給 Generator

從 Saga 內觸發異步操做（Side Effect）老是由 yield 一些聲明式的 Effect 來完成的（你也能夠直接 yield Promise，可是這會讓測試變得困難。使用 Effect 諸如 call 和 put，與高階 API 如 takeEvery 相結合，又有額外的易於測試的好處。

發起action

redux-saga 提供了另一個函數 put，這個函數用於建立 dispatch Effect

yield put({ type: '',... })

yield關鍵字用來暫停和恢復一個生成器函數，yield關鍵字使生成器函數執行暫停，yield關鍵字後面的表達式的值返回給生成器的調用者。它能夠被認爲是一個基於生成器的版本的return關鍵字。

yield關鍵字實際返回一個IteratorResult對象，它有兩個屬性，value和done。value屬性是對yield表達式求值的結果，而done是false，表示生成器函數還沒有徹底完成。

錯誤處理

try/catch 語法在 Saga 中捕獲錯誤

redux-saga 是如何工做的？

Redux Saga能夠理解爲一個和系統交互的常駐進程，其中，Saga可簡單定義以下：

Saga = Worker + Watcher

Sagas經過Generator函數來建立，採用 Generator 函數來 yield Effects，只會在應用啓動時調用，咱們能夠把它看做是在後臺運行的進程，Sagas監聽發起的action，而後決定基於這個action來作什麼，是發起異步調用仍是發起其餘的action到Store，甚至是調用其餘的Sagas

sagas 包含3個部分，用於聯合執行任務：

Watcher/Worker 指的是一種使用兩個單獨的 Saga 來組織控制流的方式。

1. root saga:當即啓動 sagas 的惟一入口

2. Watcher: 監聽發起的 action 並在每次接收到 action 時 fork 一個 worker。

3. Worker: 處理 action 並結束它。

eg：

//動態執行 rootSaga。用於 applyMiddleware 階段以後執行 rootSaga。
middleware.run(rootSaga, ...args)
...

//Watcher/Worker

function* watcher() {
  while(true) {
    const action = yield take(ACTION)
    yield fork(worker, action.payload)
  }
}

function* worker(payload) {
  // ... do some stuff
}
複製代碼

VS redux-thunk

使用redux-thunk

try {
        dispatch({ type: LOGIN_REQUEST });
        let { data } = await request.post('/login', { user, password });
        await dispatch(loadUserData(data.uid));
        dispatch({ type: LOGIN_SUCCESS, data });
    } catch(error) {
        dispatch({ type: LOGIN_ERROR, error });
    }
}
export const loadUserData = (uid) => async (dispatch) => {
    try {
        dispatch({ type: USERDATA_REQUEST });
        let { data } = await request.get(`/users/${uid}`);
        dispatch({ type: USERDATA_SUCCESS, data });
    } catch(error) {
        dispatch({ type: USERDATA_ERROR, error });
    }
}
複製代碼

使用redux-saga

export function* loginSaga() {
  while(true) {
    const { user, pass } = yield take(LOGIN_REQUEST) //等待 Store 上指定的 action LOGIN_REQUEST
    try {
      let { data } = yield call(request.post, '/login', { user, pass }); //阻塞，請求後臺數據
      yield fork(loadUserData, data.uid); //非阻塞執行loadUserData
      yield put({ type: LOGIN_SUCCESS, data }); //發起一個action，相似於dispatch
    } catch(error) {
      yield put({ type: LOGIN_ERROR, error });
    }  
  }
}

export function* loadUserData(uid) {
  try {
    yield put({ type: USERDATA_REQUEST });
    let { data } = yield call(request.get, `/users/${uid}`);
    yield put({ type: USERDATA_SUCCESS, data });
  } catch(error) {
    yield put({ type: USERDATA_ERROR, error });
  }
}
複製代碼