大致概括
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')