redux-saga是react的中间件,主要用来执行代码中的一些副作用。
使用:
1,在redux创建store的时候,要将中间件注入:
const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
)
// then run the saga
sagaMiddleware.run(mySaga)
上述代码是使用redux-saga将saga与redux-store进行连接
2,业务代码中派发含有副作用的action
dispatch({type:"USER_FETCH_REQUESTED"})
3,创建saga拦截器,会拦截对应的拥有副作用的action.
如下:USER_FETCH_REQUESTED类型的action会被mySaga定义的generacor处理。
function* mySaga() {
const res = yield takeLatest("USER_FETCH_REQUESTED", fetchUser);
yield put({ type: 'USER_FETCH_REQUESTED', payload:res })
}
export default mySaga;
takeLatest在拥有多个副作用同时执行的时候,会取消之前的任务,只执行最后一个任务。
saga的辅助函数(拦截action)
-
takeEvery(pattern, saga, ...args)所有发起的异步actiond都会执行 -
takeLatest(pattern, saga, ..args)多个任务在执行的时候,只会执行最后一个任务 -
throttle(ms, pattern, saga, ..args)以截流的方式来执行多个任务。
effect创建器
- select(selector, ...args)获取redux中的state
- call(fn,...args)命令middler以参数args调用fn函数。
- put(action) middler向store发送一个action
- take(pattern) 阻塞性的匹配发出的action