如何使用saga:
1.使用createSagaMiddleware方法创建saga 的Middleware
const sagaMiddleware = createSagaMiddleware()
2.在创建的redux的store时,使用applyMiddleware函数将创建的saga Middleware实例绑定到store上.
applyMiddleware(sagaMiddleware,middleware)
3.最后可以调用saga Middleware的run函数来执行某个或者某些Middleware。
const store = createStoreWithMiddleware(rootReducer);
sagaMiddleware.run(rootSaga);
原理:
在saga中,我们可以使用takeEvery或者takeLatest等API来监听某个action,当某个action触发后,saga可以使用call、fetch等api发起异步操作,操作完成后使用put函数触发action,同步更新state,从而完成整个State的更新。
例子1:
action
export function requireDatas(reddit) : Action{
return {
type:GETDATA,
reddit
}
}
export function isLoading() : Action{
return {
type:ISLOADING,
proload: true
}
}
export function receiveDatas(reddit) : Action{
return {
type:RECEIVEDATAS,
reddit
}
}
当点击按钮,dispatch requireDatas 这个action,然后异步获取数据,然后,更新state。
设置saga:
export function getDataApi(reddit){
let res = axios.get('http://localhost:3000/getData',{params:reddit.reddit})
return res;
}
export function* requireDatas(reddit){
yield put( actions.default.isLoading() )
const params = yield call(getDataApi, reddit);
yield put( actions.default.receiveDatas(params.data) )
}
export function* watchGetData(){
yield takeEvery(GETDATA,requireDatas)
}
takeEvery监听'GETDATA',当分发这个action的时候,执行requireDatas。
requireDatas:使用call 调用getDataApi获取数据,然后执行put方法,相当于dispatch 'RECEIVEDATAS' 这个action,从而state发生改变。
API
takeEvery
用来监听action。当监听到出发此action的时候,如果执行异步操作的话,无论第一次异步是否完成,当发生第二次的时候,都会继续执行。
export function* requireDatas(reddit){
const params = yield call(getDataApi, reddit);
yield put( actions.default.receiveDatas(params.data) )
}
export function* watchGetData(){
yield takeEvery(GETDATA,requireDatas)
}
在上面的例子中,takeEvery 允许多个 requireDatas实例同时启动。即使第一个还没结束,第二个依然会启动。
takeLatest
作用同takeEvery一样,唯一的区别是它只关注最后,也就是最近一次发起的异步请求,如果上次请求还未返回,则会被取消。
export function* watchGetData(){
yield takeLatest(GETDATA,requireDatas)
}
只执行最后一次出发的 requireDatas;
put
yield put({ type: 'PRODUCTS_RECEIVED', products })
相当于dispatch({ type: 'PRODUCTS_RECEIVED', products })
call
call用来调用异步函数,将异步函数和函数参数作为call函数的参数传入,返回一个对象。
saga引入他的主要作用是方便测试,同时也能让我们的代码更加规范化。
export function getDataApi(reddit){
let res = axios.get('http://localhost:3000/getData',{params:reddit.reddit})
return res;
}
export function* requireDatas(reddit){
const params = yield call(getDataApi, reddit);
yield put( actions.default.receiveDatas(params.data) )
}
apply
saga同样提供apply函数,作用同call一样,参数形式同js原生apply方法。
cps
同call方法基本一样,但是用处不太一样,call一般用来完成异步操作,cps可以用来完成耗时比较长的io操作等。
cps(fn, ...args)
fn: Function - 一个 Node 风格的函数。即不仅接受它自己的参数,fn 结束后会调用一个附加的回调函数。回调函数接受两个参数,第一个参数是报错信息,第二个是成功的结果。
args: Array - 一个数组,作为 fn 的参数
参考自 官方文档
fork
非阻塞任务调用机制:相对于generator函数来说,call操作是阻塞的,只有等promise回来后才能继续执行,而fork是非阻塞的 ,当调用fork启动一个任务时,该任务在后台继续执行,从而使得我们的执行流能继续往下执行而不必一定要等待返回。
我们可以把上面的例子换成:
function* loginFlow() {
while(true) {
const {user, password} = yield take('LOGIN_REQUEST')
const task = yield fork(authorize, user, password)
const action = yield take(['LOGOUT', 'LOGIN_ERROR'])
if(action.type === 'LOGOUT')
yield cancel(task)
yield call(Api.clearItem('token'))
}
}
take
takeEvery 在每个 action 来到时派生一个新的任务,它只是监听每个action,然后执行处理函数。被调用的任务无法控制何时被调用, 它们将在每次 action 被匹配时一遍又一遍地被调用。并且它们也无法控制何时停止监听。
而take则不一样,我们可以在generator函数中决定何时响应一个action,以及一个action被触发后做什么操作。
export function fetchPostsApi(reddit){
let res = axios.get('http://localhost:3000/getData',{params:reddit.reddit})
return res;
}
export function* requireDatas(reddit){
yield put( actions.default.isLoading() )
const params = yield call(fetchPostsApi, reddit);
yield put( actions.default.receiveDatas(params.data) )
}
export function* watchGetData(){
while(true) {
const params = yield take(GETDATA);
yield fork(requireDatas,params)
}
// yield takeEvery(GETDATA,requireDatas)
}
cancel
cancel的作用是用来取消一个还未返回的fork任务。防止fork的任务等待时间太长或者其他逻辑错误。
call
类似Promise中的all操作,可以将多个异步操作作为参数参入all函数中,如果有一个call操作失败或者所有call操作都成功返回,则本次all操作执行完毕。
const [users, repos] = yield all([
call(fetch, '/users'),
call(fetch, '/repos')
])
race
类似Promise中的race操作,可以将多个异步操作作为参数参入race函数中,如果有一个race操作失败或者成功,则本次race操作执行完毕。
yield race({
task: call(backgroundTask),
cancel: take('CANCEL_TASK')
})
Interface Task
Task 接口指定了通过 fork,middleware.run 或 runSaga 执行 Saga 的结果。
task.isRunning() 如果任务还未返回或抛出了一个错误则返回 true
task.result() 任务的返回值。如果任务正在执行中则返回undefined
task.error() 任务抛出的错误。如果任务正在执行中则返回
undefined
task.done 一个 Promise,以下二者之一:
以任务的返回值 resolve
以任务抛出的错误 reject
task.cancel() 取消任务(如果任务还在执行中)
actionChannel
在之前的操作中,所有的action分发是顺序的,但是对action的响应是由异步任务来完成,也即是说对action的处理是无序的。
如果需要对action的有序处理的话,可以使用actionChannel函数来创建一个action的缓存队列,但一个action的任务流程处理完成后,才可是执行下一个任务流。
function* watchRequests() {
// 1- Create a channel for request actions
const requestChan = yield actionChannel('REQUEST')
while (true) {
// 2- take from the channel
const {payload} = yield take(requestChan)
// 3- Note that we're using a blocking call
yield call(handleRequest, payload)
}
}