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')