（1）不要在循环，条件或嵌套函数中调用Hook，必须始终在 React函数的顶层使用Hook
import{takeEvery,put,call}from"redux-saga/effects" import{post}from"@/utils/http" function*watchSaga() { yieldtakeEvery('asyncadd',addSaga) } /* 在此处完成网络请求 */ function*addSaga({payload}) { /*收到发过的的dispatch saga帮我们实现了这个co赋值过程*/ letret=yieldcall(post,payload) ...
import{all,put,takeEvery}from'redux-saga/effects'function*increment(){// 相当于:dispatch({ type: 'increment' })yieldput({type:'increment'})}function*watchIncrement(){// 监听类型为increment_saga的action,监听到启动incrementyieldtakeEvery('increment_saga',increment)}function*rootSaga(){// 启动wat...
import { put, takeEvery, all, delay } from 'redux-saga/effects'// Worker Saga: 工作 Saga 用于执行异步任务export function * fetchUserInfo (action) { const { type, payload } = action yield delay(1000) // 模拟异步请求，暂停 1s const userInfoArr = [ { name: 'user1', age...
redux-saga常用api概述 call 异步阻塞调用 fork 异步非阻塞调用,无阻塞的执行fn,执行fn时,不会暂停Generator put 相当于dispatch,分发一个action select 相当于getState,用于获取store中相应部分的state take 监听action,暂停Generator,匹配的action被发起时,恢复执行。take结合fork,可以实现takeEvery和takeLatest的效果...
sagaMiddleware.run(rootSaga) const action = type => store.dispatch({type}) ``` ## 辅助函数 用来在一些特定的action被发起到Store时派生任务。 1. takeEvery 2. put: 用于创建dispatch Effect 3. take: 通过全面控制action观察进程来构建复杂的控制流 ...
redux-saga 是一个用于管理应用程序副作用(例如异步获取数据,访问浏览器缓存等)的库,它的目标是让副作用管理更容易,执行更高效,测试更简单,在处理故障时更容易。 你可能已经用了 redux-thunk 来处理数据的读取。不同于 redux thunk,你不会再遇到回调地狱了,你可以很容易地测试异步流程并保持你的 action 是干净的...
put 在前面提到,redux-saga做为中间件,工作流是这样的: UI——>action1———>redux-saga中间件———>action2———>reducer.. 从工作流中,我们发现redux-saga执行完副作用函数后,必须发出action,然后这个action被reducer监听,从而达到更新state的目的。相应的这里的put对应与redux中的dispatch,工作流程图如下: ...
可以理解为实行一个异步函数,是阻塞型的,只有运行完后面的函数,才会继续往下import{call,put}from'redux-saga/effects'exportfunction*fetchData(action){try{constapiAjax=(params)=>fetch(url,params);constdata=yieldcall(apiAjax);yieldput({type:"FETCH_SUCCEEDED",data});}catch(error){yieldput({type:"...
07__redux-saga 是什么 redux-saga 是 redux 的一个中间件,为 Redux 提供额外的功能,例如代替redux-thunk处理异步。 takeEvery 和 put takeEvery:请求不返回之前多次点击不会中断,会触发多次 src/sagas/index.js import{takeEvery,put,delay}from'redux-saga/effects';import{INCREMENT,INCREMENT_ASYNC}from'../...