redux-saga淺析

大致概括

redux-saga相比較比redux-thunk寫法更優雅，被實現爲 generator，把異步行爲放在了saga中進行處理。保持了action的整潔性。功能類似redux-thunk + async/await。

redux-saga 的 effects

redux-saga中的 Effects 是一個純文本 JavaScript 對象，包含一些將被 saga middleware 執行的指令。這些指令所執行的操作包括如下三種：

• 發起一個異步調用（如發一起一個 Ajax 請求）
• 發起其他的 action 從而更新 Store
• 調用其他的 Sagas

從 redux-thunk 到 redux-saga

redux-thunk寫法 async+await

import request from 'axios';
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* loadUserData(uid) {
  try {
    yield put({ type: USERDATA_REQUEST });
    let { data } = yield call(userRequest, `/users/${uid}`);
    yield put({ type: USERDATA_SUCCESS, data });
  } catch(error) {
    yield put({ type: USERDATA_ERROR, error });
  }
}

小技巧

generator調用異步請求的call方法是個阻塞方法，所以發起多個請求時應

import { call } from 'redux-saga/effects'
//同步執行
const [users, products] = yield [
  call(fetch, '/users'),
  call(fetch, '/products')
]

//而不是
//順序執行
const users = yield call(fetch, '/users'),
products = yield call(fetch, '/products')