首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Redux saga在yield调用后不执行

Redux saga是一个用于管理应用程序副作用(例如异步请求和状态更新)的库。它是基于Generator函数的一种解决方案,可以让开发者以同步的方式编写异步代码。

在Redux saga中,使用yield关键字来暂停和恢复Generator函数的执行。当调用yield后,saga会等待yield后面的表达式完成,并将其结果返回给调用方。然后,saga会继续执行下一个yield语句。

如果在Redux saga中遇到yield调用后不执行的情况,可能有以下几个原因:

  1. 未正确启动saga:确保在应用程序的入口文件中正确启动saga。通常,可以使用redux-saga提供的run函数来启动saga。
  2. 未正确定义saga:检查saga的定义是否正确。确保使用了正确的语法和逻辑。可以使用redux-saga提供的各种effect来处理异步操作,例如callputtakeEvery等。
  3. 未正确处理yield返回的结果:当调用yield后,需要将其返回的结果赋值给一个变量,并在后续逻辑中进行处理。如果未正确处理返回结果,可能导致后续代码不执行。
  4. 未正确处理错误:在saga中进行异步操作时,可能会出现错误。确保在saga中正确处理错误,例如使用try-catch语句块来捕获异常,并根据需要执行相应的逻辑。

如果以上原因都没有解决问题,可以尝试以下方法进行排查:

  1. 检查Redux store的配置是否正确,确保saga中间件已正确添加到store中。
  2. 检查Redux action是否正确触发,确保在需要执行saga的地方正确触发相应的action。
  3. 检查saga的监听器是否正确设置,确保监听到正确的action。

总之,当Redux saga在yield调用后不执行时,需要仔细检查saga的定义、启动和调用逻辑,以及错误处理等方面的问题。根据具体情况进行排查和调试,以确保saga能够正常执行。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

手写Redux-Saga源码

本文要讲的就是Redux-Saga,这个也是我实际工作中使用最多的Redux异步解决方案。...可以看到Redux-Saga这种机制也是用takeEvery先注册回,然后使用put发出消息来触发回执行,这其实跟我们其他文章多次提到的发布订阅模式很像。...并执行,如果遇到take就将它注册到channel上去,如果遇到put就将对应的回拿出来执行,但是Redux-Saga又将这个过程分为了好几层,我们一层一层来看吧。...除非你触发了SOME_ACTION,这时候会把SOME_ACTION的回拿出来执行,这个回就是迭代器的next,所以就可以继续执行下面这行代码了yield fork(saga)。...Redux-Saga增强了Redux的dispatch函数,dispatch的同时会触发channel.put,也就是让Redux-Saga也响应回

1.7K30

React saga_react获取子组件ref

redux Effects Effect 是一个 javascript 对象,可以通过 yield 传达给 sagaMiddleware 进行执行在, 如果我们应用redux-saga,所有的 Effect...redux增加中间件处理副作用后的数据流大致如下: UI——>action(side function)—>middleware—>action(plain)—>reducer—>state—>UI...action不易维护的原因: action的形式统一 就是异步操作太为分散,分散了各个action中 2.redux-saga写一个hellosaga 跟redux-thunk,redux-saga...是控制执行的generator,redux-saga中action是原始的js对象,把所有的异步副作用操作放在了saga函数里面。...首先,redux-saga中提供了一系列的api,比如take、put、all、select等API ,redux-saga中将这一系列的api都定义为Effect。

4.5K30

前端实现异步的几种方式_redux是什么

上一篇我们介绍过Redux的中间件,说白了就是action被传递到reducer之前新进行了一次拦截,然后启动异步任务,等异步任务执行完成后再发送一个新的action,调用reducer修改状态数据。...这就是redux-saga中最为重要的一个概念:Effect。 实际上,我们可以直接通过yield fetchUser()执行我们的异步任务,并返回一个Promise。...但是这样的话不好做模拟(mock)测试:我们测试过程中,一般不会真的执行异步任务,而是替换成一个假函数。实际上,我们只需要确保yield了一个正确的函数,并且函数有着正确的参数。...因此,相比于直接调用异步函数,我们可以仅仅 yield 一条描述函数调用的指令,由redux-saga中间件负责解释执行该指令,并在获得结果响应时恢复Generator的执行。...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

1.7K30

高级前端react面试题总结

redux-saga如何处理并发:takeEvery可以让多个 saga 任务并行被 fork 执行。...(function*() { while (true) { const action = yield take(pattern) yield fork(saga, .....store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js 中,不再是掺杂 action.js...⽤到,但是我们依然需要引⼊这些代码ts⽀持不友好: yield⽆法返回TS类型redux-saga可以捕获action,然后执行一个函数,那么可以把异步代码放在这个函数中,使用步骤如下:配置中间件import...,初始化render时执行,在这个回函数里面,你可以根据属性的变化,通过调用this.setState()来更新你的组件状态,旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的

4K40

redux-sage笔记

也一直听说redux-saga是个和redux-thunk能够实现类似功能的库,而且redux-saga的处理方法更加高压和方便。这几天阅读了下文档写些小结。...以下是一些saga的常用方法 redux/saga takeEvery yield* takeEvery('PRODUCTS_REQUESTED', fetchProducts) 每当有PRODUCTS_REQUESTED...的action分发的时候就执行fetchProducts函数,在这里fetchProducts函数也是Generator函数(tips:注意yield* 就是Generator内执行另一个Generator...相当于Promise.all 的功能,所有的fun都结束了才会结束这个yield 被强行cancel的会抛出SagaCancellationException(redux-sage下) 错误。...未被捕获的话,这个错误是不会向上冒泡的 使用redux-saga来处理一些复杂的流程的时候似乎比较不错

70030

React-Redux-Saga

Redux-saga 简介redux-sagaredux-thunk 一样, 是一个 Redux 中获取存储异步数据的中间件redux-saga 可以直接拦截 dispatch 派发的 action..., 从而实现在执行 reducer 之前执行一些其它操作使用 Redux-saga安装 Redux-saganpm install redux-saga创建 store 时应用 redux-saga...如果导入的是redux-saga, 那么返回给我们的是一个用于创建中间件对象的方法* */import createSagaMiddleware from 'redux-saga'import...put 方法进行添加即可,更改 store.js 告诉 saga 中间件的生成器哪些通过 dispatch 派发的 action 需要进行拦截, run 方法进行指定:图片在组件中派发 action.../最后本期结束咱们下次再见~ 关注我迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎评论区留言,我一般看到都会回复的。

17930

redux-saga

通过框架约束,多一层描述对象来避免mock 这样做并不十分完美,还存在2个问题: 业务代码稍显麻烦(直接yield promise/dispatch action,而都要用框架提供的creator(call...task完全独立,与当前saga无关 当前saga不管它执行完了没,发生cancel/error也不会影响当前saga 效果相当于让指定task独立顶层执行,与middleware.run(rootSaga...如果task序列处理过程中被cancel掉了,会把cancel信号向下传递,取消执行所有pending task。...简单理解的话:redux-saga里,Saga就是generator,Sagas就是多个generator Sagas有2种顺序组合方式: yield* saga() call(saga) 同样,直接...这样保证了LOGOUT总是执行过LOGIN之后的某个时刻发生的,代码看起来相当漂亮 特定操作提示 // 创建第3条todo的时候,给出提示消息 function* watchFirstThreeTodosCreation

1.9K41

react项目架构之路初探

redux-saga 通过创建 Sagas 将所有的异步操作逻辑收集一个地方集中处理,可以用来代替 redux-thunk 中间件。...Sagas 可以被看作是在后台运行的进程,Sagas 监听发起的action,然后决定基于这个 action来做什么 redux-saga 的世界里,所有的任务都通用 yield Effects 来完成...Effects 都是简单的 Javascript 对象,包含了要被 Saga middleware 执行的信息 redux-saga 优缺点 redux-thunk优缺点 Sagas 不同于thunks...,thunks 是action被创建时调用,而 Sagas只会在应用启动时调用 redux-thunk中间件可以让action创建函数先返回一个action对象,而是返回一个函数,函数传递两个参数...(dispatch,getState),函数体内进行业务逻辑的封装 redux-thunk的缺点: action的形式统一 ,异步操作太分散,分散了各个action中 redux-saga本质是一个可以自执行

2.4K10

ES6中的Generator函数

ES6中的Generator函数 2018-3-6 作者: 张子阳 分类: Web前端 之前React项目中,遇到异步请求,都是通过redux-thunk来处理,但使用这种方式,action就变得不那么纯净了...当前新的趋势是使用redux-saga来处理side effects(副效应)。redux-saga中,重度使用了generator函数的概念,这篇文章先就Generator函数做一个小结。...使用yield关键字 目前看上去Generator函数好像并没有什么用,实际上,它可以结合yield关键字,从而实现函数的分段执行。...,可以看到,函数每运行到yield的位置就暂停了,直到下一次执行next()。...总结 这篇文章简要地介绍了Generator函数及其作用,对于想要熟悉Redux/Saga的同学来说,算是一个前导的知识点。 感谢阅读,希望这篇文章能给你带来帮助!

45130

状态管理的概念,都是纸老虎

redux-saga 把异步获取数据这类的操作都叫做副作用(Side Effect),它的目标就是把这些副作用管理好,让他们执行更高效,测试更简单,处理故障时更容易。...redux-saga 之前,需要熟悉一些预备知识,那就是 ES6 的 Generator。...yield 都发起了阻塞,saga 会等待执行结果返回,再执行下一指令。...saga 还能很方便的并行执行异步任务,或者让两个异步任务竞争: // 并行执行,并等待所有的结果,类似 Promise.all 的行为 const [users, repos] = yield [...这里讨论更多 saga 的细节,大家了解 saga 的思想就行,细节请看文档。 对比 Redux-thunk ? 比较一下 redux-thunk 和 redux-saga 的代码: ? ?

5.2K20

Redux:从action到saga

这个时候就需要redux-saga了。redux-sagasaga就是一个可声明的组织良好的副作用实现方式(超时,API调用等等。。)...所以不用再用redux-thunk中间件来写,我们用saga来发出action并yield副作用。这样不复杂?action creator这样的写法不是更简单?虽然看起来是这样的,但是NO!...在上面的例子中我用了两种副作用: 一个put副作用,它会给redux store分发一个action。 一个call副作用,它会执行一个异步的方法(promise,cps后者其他的saga)。...之前的例子里,loadTodos saga一开始就会触发。但是,如果我们想要每次一个action分发到store的时候触发saga要怎么做呢?...); 上例用到了两个特殊的effect: take effect,它会等待分发redux action的时候执行 fork effect, 它会触发另外一个effect,子effect开始之前就会执行

1.2K00

前端react面试题(必备)2

尽管建议app中使用context,但是独有组件而言,由于影响范围小于app,如果可以做到高内聚,破坏组件树之间的依赖关系,可以考虑使用context对于组件之间的数据通信或者状态管理,有效使用props...useLayoutEffect:useLayoutEffect浏览器渲染前执行useEffect浏览器渲染之后执行当父组件引入子组件以及更新某一个值的状态的时候,往往会造成一些不必要的浪费,而useMemo...store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js 中,不再是掺杂 action.js...⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow易测试,提供了各种case的测试⽅案,包括mock task,分⽀覆盖等等redux-saga缺陷:...⽤到,但是我们依然需要引⼊这些代码ts⽀持不友好: yield⽆法返回TS类型redux-saga可以捕获action,然后执行一个函数,那么可以把异步代码放在这个函数中,使用步骤如下:配置中间件import

2.3K20

redux-saga_pub culture

通读了官方文档后,大概了解到,副作用就是action触发reduser之后执行的一些动作, 这些动作包括但不限于,连接网络,io读写,触发其他action。...浏览了很多比较文章后,最终,我们选择了redux-saga来处理应用的控制层。...takeLatest相同的action被触发多次的时候,之前的副作用如果没有执行完,会被取消掉,只有最后一次action触发的副作用可以执行完。...而Saga解决的问题要更宽泛一些,因为saga只是拦截了action,至于做什么,开发者需要自己来考虑,可以是fetch后端,也可以是更新redux store, 甚至可以执行action带进来的callback...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

1.4K10

Redux 异步解决方案2. Redux-Saga中间件

否则会出现惊喜 call generator 只能接受到返回值 redux-saga初使用 安装: yarn add redux-saga store.js import { createStore...from 'redux-saga'; // 导入创建saga的函数 import {add, deleter} from '....// 查询store的状态 takeEvery // 对action进行监听 } from 'redux-saga/effects'; export function* fetchData...只会有一个任务 会自动取消前一个任务 take 解释: take函数可以理解成为监听未来的action 告诉middleware等待第一个action Generator会暂停 直到action匹配成功 才会执行之后的语句...也就是说take是一个阻塞的effect fork 解释: fork和call函数类似 但是fork是非阻塞函数 不会等待执行 put 解释: put函数相当于redux的dispatch 当put一个

1K20

前端二面高频react面试题集锦_2023-02-23

setState 的第二个参数是一个可选的回函数。这个回函数将在组件重新渲染后执行。等价于 componentDidUpdate 生命周期内执行。...事件的执行顺序为原生事件先执行,合成事件后执行,合成事件会冒泡绑定到 document 上,所以尽量避免原生事件与合成事件混用,如果原生事件阻止冒泡,可能会导致合成事件执行,因为需要冒泡到document...store.dispatch(action) } (2)使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独 saga.js 中,不再是掺杂 action.js...⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow 易测试,提供了各种case的测试⽅案,包括mock task,分⽀覆盖等等 redux-saga...⽤到,但是我们依然需要引⼊这些代码 ts⽀持不友好: yield⽆法返回TS类型 redux-saga可以捕获action,然后执行一个函数,那么可以把异步代码放在这个函数中,使用步骤如下: 配置中间件

2.8K20
领券