介绍
- 在redux中更好的解决异步操作
- redux-saga相当于在redux原来的数据流中多了一层,对action进行监听
- 接收到action时,派发一个任务维护state
- saga通过Generator方式创建,异步方法同步化
正常redux流程
加入redux-saga之后的流程
使用方式
import { createStore, applyMiddleware } from 'redux' import createSagaMiddleware from 'redux-saga' //引入saga文件 import { rootSaga } from './rootSaga' //使用 redux-saga 模块的 createSagaMiddleware 工厂函数来创建一个 Saga middleware。 //运行 rootSaga 之前，我们必须使用 applyMiddleware 将 middleware 连接至 Store。然后使用 const sagaMiddleware = createSagaMiddleware(); const middlewares = [ sagaMiddleware ]; const store = createStore(rootReducer, applyMiddleware(...middlewares)); sagaMiddleware.run(rootSaga); 复制代码 redux-saga 辅助函数
sage提供了一些辅助函数,包装了一些内部方法,用来在一些特定的action被发起到store时派生任务
takeEvery
import { call, put } from 'redux-saga/effects' export function* fetchData(action) { try { const data = yield call(Api.fetchUser, action.payload.url); yield put({type: "FETCH_SUCCEEDED", data}); } catch (error) { yield put({type: "FETCH_FAILED", error}); } } function* watchFetchData() { yield* takeEvery('FETCH_REQUESTED', fetchData) } //有一种用法:监控所有的发起的action yield takeEvery('*', fn) 复制代码 takeEvery 允许多个 fetchData 实例同时启动, 在某个特定时刻, 尽管之前还有一个或多个fetchData尚未结束, 我们还是可以启动一个新的fetchData任务-->意思就是只用调用了 FETCH_REQUESTED action的时候就会启动 fetchData 任务.
takeLatest
function* watchFetchData() { yield* takeLatest('FETCH_REQUESTED', fetchData) } 复制代码 在任何时刻 takeLatest只允许一个 fetchData 任务在执行,并且这个任务是最后被启动的那个,如果之前有一个任务再启动的时候执行了fetchData , 那么之前的任务会被自动取消 -- 可以获得最后一次(最新)调用FETCH_REQUESTED action 得到的结果.
Effects
概念
sagas都是Generator函数实现,可以用yield 对 js 对象来表达saga的逻辑,这些对象就是effect,
- sagas都是用Generator函数实现的
- 在 Generator 函数中，yield 右边的任何表达式都会被求值，结果会被 yield 给调用者
- 用yield对Effect(简单对象),进行解释执行
- Effect 是一个简单的对象，这个对象包含了一些给 middleware 解释执行的信息。 你可以把 Effect 看作是发送给 middleware 的指令以执行某些操作（调用某些异步函数，发起一个 action 到 store，等等）
//官方例子 import { takeEvery } from 'redux-saga/effects' import Api from './path/to/api' //监听如果有一个调用PRODUCTS_REQUESTED 的action的话,就会匹配到第二个参数所代表的effect function* watchFetchProducts() { yield takeEvery('PRODUCTS_REQUESTED', fetchProducts) } //执行,获取数据 //使用Generator 调用了Api.fetch,在Generator函数中,yield右面的任何表达式都会被求值,结果会被yield给调用者 function* fetchProducts() { const products = yield Api.fetch('/products') console.log(products) } //第二种方式 import { call } from 'redux-saga/effects' //call(fn, ...args) 这个函数。与前面的例子不同的是，现在我们不立即执行异步调用，相反，call //创建了一条描述结果的信息就像在 Redux 里你使用 action 创建器，创建一个将被 Store 执行的、描述 action 的纯文本对象。 //call 创建一个纯文本对象描述函数调用。redux-saga middleware 确保执行函数调用并在响应被 resolve 时恢复 generator function* fetchProducts() { const products = yield call(Api.fetch, '/products') // ... } 复制代码 发送action到store
//这种方式是Generator获取到了返回值,在调用dispatch function* fetchProducts(dispatch) const products = yield call(Api.fetch, '/products') dispatch({ type: 'PRODUCTS_RECEIVED', products }) } import { call, put } from 'redux-saga/effects' //... function* fetchProducts() { const products = yield call(Api.fetch, '/products') // 创建并 yield 一个 dispatch Effect yield put({ type: 'PRODUCTS_RECEIVED', products }) } 复制代码 错误处理
import Api from './path/to/api' import { call, put } from 'redux-saga/effects' function* fetchProducts() { try { const products = yield call(Api.fetch, '/products') yield put({ type: 'PRODUCTS_RECEIVED', products }) } catch(error) { yield put({ type: 'PRODUCTS_REQUEST_FAILED', error }) } } 复制代码 使用 try/catch 的方式捕获saga的错误信息
一些概念
从 Saga 内触发异步操作（Side Effect）总是由 yield 一些声明式的 Effect 来完成的 , 一个 Saga 所做的实际上是组合那些所有的 Effect，共同实现所需的控制流。使用上是用yield Effects的方式来完成,Effect包括
- call: yield call(Generator, param) yield一个call,命令middleware以参数param调用函数 到Generator,saga等待Generator执行之后,接收返回值继续执行,call是堵塞的,就是等待执行完再继续执行,返回的是执行完正常返回的结果.
- take: 是阻塞的,只有监听到他(action.type),才会继续往下执行.也就是说创建一个effect的描述信息,用来命令middleware在Store上等待指定action,在发起与他相匹配的action之前,Generator将暂停.
- put: 类似dispatch方法,触发一个action,用来命令middleware向Store发起一个action请求,而且是非阻塞的
- fork: 非阻塞的,遇到它不需要等待他执行完毕,就可以继续往下执行,fork返回的是一个任务,可以被取消
- cancel: 针对fork方法返回的任务,进行取消
- select: 可以从全局state中获取状态
- saga: 就是用* 注册的函数,一个函数就是一个saga
- effect: 上面的call,put,take...就是effect
function* watchAndLog() { while (true) { const action = yield take('*') const state = yield select() } } take，它将会暂停 Generator 直到一个匹配的 action 被发起了，watchAndLog 处于暂停状态，直到任意的一个 action 被发起。 复制代码 无阻塞调用-fork
fork一个任务,任务会在后台启动,调用者也可以继续它的流程,而不用等待被fork的任务执行结束 当我们需要有并发操作的时候,使用call effect会阻塞saga的执行,使用fork就需要关心被阻塞,或者等待结果返回在继续执行
const result = yield fork (saga,param) 复制代码
同时执行多个任务
const [users, repos] = yield [ call(fetch, '/users'), call(fetch, '/repos') ] 复制代码
当需要同步执行多个任务,需要把yield一个包含了effect的数组,Generator将会阻塞,等所有的effect都执行完毕
使用
//redux.connect所需要绑定到props上的action function mapDispatchToProps(dispatch) { return { getHome: bindActionCreators(getHomeAdData, dispatch) } } //一个 action creator export function getHomeAdData(){ return { type: actionTypes.HOME_AD_DATA, } } //监听action.type,然后出发后面的action export default function* rootSaga () { // 就在这个rootSaga里面利用takeEvery去监听action的type yield takeEvery('HOME_AD_DATA', getHomeAdData); yield takeEvery('GET_LIKE_LIST_DATA', getLikeListData); } //通过yield call Effect 获取返回值,继续下面操作 export function* getHomeAdData() { let data = yield call(getAdData) ... yield put({type:UPDATE_HOME_AD_DATA, data: dataArr}) } export function getAdData() { const result = axios.get('/api/homead') return result } 复制代码https://juejin.im/post/5b306e6151882574d3249605