我可以在redux-sagas中使用'take‘来等待进度吗？当这样使用时，Saga流会跳回到saga中较早的点 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

redux-saga入门

saga中yield 后面的内容我们称呼它为Effect(redux-saga的任务单元)，在Effects中我们可以进行启动其它saga，也可以处理一些副作用操作。...function* watchLogin() { yield takeLatest('login', login) // 1，使用take等待类型loginOut的action的到来，take将阻塞当前...即继续登出操作 yield call(loginOut) } 当yield take(‘loginOut’)等待的类型为loginOut的action到来时，Generator开始继续执行后面的代码，即...fork表现形式为创建一个分叉的task去执行fn，且fork所在的saga不会在等待fn返回结果的时候被中间件暂停，相反，它在fn被调用时便会立即恢复执行。...一个task就想一个在后台运行的进程，在redux-saga应用程序中，可以运行多个task，task可通过fork函数创建。

1.4K2 0

redux-saga学习

，所有的任务都通过用 yield Effects 来完成 ( effect可以看作是redux-saga的任务单元 ) redux-saga启动的任务可以在任何时候通过手动来取消，也可以把任务和其他的Effects...---- 这样的反向控制让我们可以使用传统的 push 方法实现不同的控制流程。...这个 effect 是非阻塞型的，并且所有向下游抛出的错误（例如在 reducer 中），都不会冒泡回到 saga 当中。...在基于 redux-saga 的应用程序中，可以同时运行多个 task。...阻塞调用/非阻塞调用阻塞调用的意思是，Saga 在 yield Effect 之后会等待其执行结果返回，结果返回后才会恢复执行 Generator 中的下一个指令。

2.7K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

React saga_react获取子组件ref

大家好，又见面了，我是你们的朋友全栈君。...这些Effect执行后，当函数resolve时返回一个描述对象，然后redux-saga中间件根据这个描述对象恢复执行generator中的函数。...不过这里call方法传入的函数fn可以是普通函数，也可以是generator。call方法应用很广泛，在redux-saga中使用异步请求等常用call方法来实现。...4.redux-saga实现一个登陆和列表样例接着我们来实现一个redux-saga样例，存在一个登陆页，登陆成功后，显示列表页，并且，在列表页，可以点击登出，返回到登陆页。...5.总结通过上述章节，我们可以概括出redux-saga做为redux中间件的全部优点：统一action的形式，在redux-saga中，从UI中dispatch的action为原始对象集中处理异步等存在副作用的逻辑

4.5K3 0

手写Redux-Saga源码

本文要讲的就是Redux-Saga，这个也是我在实际工作中使用最多的Redux异步解决方案。...也就是说，当你这样写时： yield take("SOME_ACTION"); yield fork(saga); 当运行到yield take("SOME_ACTION");这行代码时，整个迭代器都阻塞了...官方文档中的这种写法反而很好理解，我这里采用文档中的这种写法: export function takeEvery(pattern, saga) { function* takeEveryHelper...也就是说take的意思就是：我在等某某事件，这个事件来之前不许往下走，来了后就可以往下走了。...整个Redux-Saga都是基于Generator的，每往下走一步都需要手动调用next，这样当他执行到中途的时候我们可以根据情况不再继续调用next，这其实就相当于将当前任务cancel了。

1.7K3 0

Redux：从action到saga

前端应用消失的部分一个现代的、使用了redux的前端应用架构可以这样描述：一个存储了应用不可变状态（state）的store 状态（state）可以被绘制在组件里（html或者其他的东西）。...const render = (state) => components 组件可以给store分发action 使用reducer这种纯方法来根据就的状态返回新的状态 const reducer = (...但是当需要处理异步的action（在函数式编程里称为副作用）的时候事情就没有这么简单了。为了解决这个问题，redux建议使用中间件（尤其是thunk）。...在上面的例子中我用了两种副作用：一个put副作用，它会给redux store分发一个action。一个call副作用，它会执行一个异步的方法（promise，cps后者其他的saga）。...state使用reducer这样的纯方法来修改的。

1.2K0 0

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

这么说有点抽象，我们来举个具体的例子：假如你在一个在线订票系统上订了一张机票，下单成功后，一般会给你留30分钟付款时间，如果你在30分钟内完成付款就可以成功出票，否则会被取消预定。...redux-saga就是一个帮你管理这堆saga的管家，那么它跟其他的中间件实现有什么不同呢？它使用了ES6中Generator函数语法。...但是这样的话不好做模拟（mock）测试：我们在测试过程中，一般不会真的执行异步任务，而是替换成一个假函数。实际上，我们只需要确保yield了一个正确的函数，并且函数有着正确的参数。...上等待指定action fork：和call类似，但是是非阻塞的，立即返回比如我们之前用到的takeEvery()函数，其实内部实现就是不停地take -> fork -> take ->...借用网上的一张神图来更直观地理解上面这些API的作用：另外，如果你想要同时监听不同的action，可以使用all()或者race()把他们组合成一个root saga： export default

1.7K3 0

轻松实现 Saga 模式

最后，我将向您展示如何避免随之而来的项目失败。满足持久执行的需要 Saga 模式应运而生，以应对复杂软件流程中的一个紧迫需求：持久执行。...它必须等待所需事务完成，不断重试直到成功，并协调执行队列中的其他事务。如果一个事务在完成之前崩溃，该过程必须能够回滚到一致的状态，以保持整个应用程序的完整性。...关系数据库在回滚失败的事务时也会进行这种操作，以保持数据的一致性。使用单独的平台来管理持久执行可以将这些好处带给事务排序，Temporal 将其称为工作流。...公司在使用 Saga 模式处理软件进程中的上下文切换方面已经朝着正确的方向迈出了一步。但是，通过将这些 Saga 模式抽象为一个独立的服务而不是应用层，公司可以走得更远。...做好这件事可以将组织的软件成熟度提升几年。第 2 部分：避免临界点在本文的前半部分，我谈到了在应用层协调事务和保留状态是多么繁重。

1211 0

深入理解 redux 数据流和异步过程管理

组件从 store 中取数据，当交互的时候去通知 store 改变对应的数据。...但是 context 做为 store 有一个问题，任何组件都能从 context 中取出数据来修改，那么当排查问题的时候就特别困难，因为并不知道是哪个组件把数据改坏的，也就是数据流不清晰。...这样数据流动是单向的，清晰的，很容易管理。这就像为什么我们在公司里想要什么权限都要走审批流，而不是直接找某人，一样的道理。集中管理流程比较清晰，而且还可以追溯。...异步过程的管理很多情况下改变 store 数据都是一个异步的过程，比如等待网络请求返回数据、定时改变数据、等待某个事件来改变数据等，那这些异步过程的代码放在哪里呢？组件？...比如通过 take、takeEvery、takeLatest 来监听 action，然后执行 worker saga。

2.5K1 0

Dva 底层是如何组织起 Redux 数据流的？

但随之而来通常会有这样的疑问：概念太多，并且 reducer, saga, action 都是分离的（分文件）。文件切换问题。...包括： State 数据，通常为一个 JavaScript 对象，操作的时候每次都要当作不可变数据（immutable data）来对待，保证每次都是全新对象，没有引用关系，这样才能保证 State 的独立性...的 createSagaMiddleware 创建 saga中间件，调用中间件的 run 方法所有收集起来的异步方法 // run方法监听每一个副作用action，当action发生的时候，执行对应的..., eg: logging 这样一来, 各个部分各司其职, 耦合度更低, 复用度更高, 扩展性更好。...因为我们可以使用 Middleware 拦截 action, 这样一来异步的网络操作也就很方便了, 做成一个 Middleware 就行了, 这里使用 redux-saga 这个类库, 举个栗子: 点击创建

1.4K1 0

前端高频react面试题整理5

尤雨溪在社区论坛中说道∶ 框架给你的保证是，你不需要手动优化的情况下，我依然可以给你提供过得去的性能。...在React中，当prop或者state发生变化时，可以通过在shouldComponentUpdate生命周期函数中执行return false来阻止页面的更新，从而减少不必要的render执行。...但是对于合成事件来说，有一个事件池专门来管理它们的创建和销毁，当事件需要被使用时，就会从池子中复用对象，事件回调结束后，就会销毁事件对象上的属性，从而便于下次复用事件对象。...为了解决这些问题，Hook 使你在非 class 的情况下可以使用更多的 React 特性。从概念上讲，React 组件一直更像是函数。...当state改变时，组件通过重新渲染来响应：// 正确做法This.setState({message: ‘Hello World’});这三个点(...)在 React 干嘛用的？...

9403 0

redux-saga

作为一个Redux中间件，想让Redux应用中的副作用（即依赖/影响外部环境的不纯的部分）处理起来更优雅二.设计理念 Saga像个独立线程一样，专门负责处理副作用，多个Saga可以串行/并行组合起来，...Effect层存在的主要意义是为了易测试性，所以用简单的描述对象来表示操作，多这样一层指令虽然可以直接yield Promise（比如上面核心实现里的示例），但测试case中无法比较两个promise...所以添一层描述对象来解决这个问题，测试case中可以简单比较描述对象，实际起作用的Promise由redux-saga内部生成这样做的好处是单测中不用mock异步方法（一般单测中会把所有异步方法替换掉...saga 效果相当于让指定task独立在顶层执行，与middleware.run(rootSaga)类似通过fork执行的task与当前saga有关 fork所在的saga会等待forked task...这样保证了LOGOUT总是在执行过LOGIN之后的某个时刻发生的，代码看起来相当漂亮特定操作提示 // 在创建第3条todo的时候，给出提示消息 function* watchFirstThreeTodosCreation

1.9K4 1

react项目架构之路初探

Sagas 可以被看作是在后台运行的进程，Sagas 监听发起的action，然后决定基于这个 action来做什么在 redux-saga 的世界里，所有的任务都通用 yield Effects 来完成...(dispatch,getState),在函数体内进行业务逻辑的封装 redux-thunk的缺点： action的形式不统一，异步操作太分散，分散在了各个action中 redux-saga本质是一个可以自执行的...reduxsauce 传统开发中reducer中区分不同的action 使用的是switch case的结构针对每一个action的type进行判断使用reduxsauce之后我认为它和.../saga' // 引入saga中相关组件 import createSagaMiddleware from 'redux-saga' // 引入react-redux相关组件使redux和react...当这种处理很多以后我们再使用switch 反而不太好用参照与vuex中声明mumation的方式我们使用了reduxsauce插件更好的标识不同的action 同时

2.5K1 0

简析redux技术栈(二)：认识saga的buffer和chanel

例如下面使用了redux-saga的react项目需要以下这样的初始化 function configureStore(initialState) { // 运行返回一个redux middleware...我们平时写代码在 react 中与 saga 进行交互，都是dispatch一个action到与我们的 saga 逻辑进行交互。...翻看createSagaMiddleware源码，可以很清晰的看到，这就是使用了中间件后，我们每次dispatch一个 action 后，在 saga 中间件内会往channel内put这个action...这样，无论take还是put，时间复杂度都是o(1) 当pushIndex达到了 buffer 的长度的时候，buffer 的处理会根据 buffer 类型不同进行处理 1、ON_OVERFLOW_THROW...chanel的一些使用参考可以看文档简化的 eventChanel 实现如下，其实给订阅函数传进一个函数，调用这个函数可以往 Chanel 内 put 东西。

1.1K1 0

6个免费好用的LiDAR软件

要找到免费的激光雷达数据处理软件并不容易，因此在这篇文章中，我们将介绍6个最出色的免费或开源的LiDAR软件，可以用于3D点云查看、点云数据分析、点云操作等。...首先，你可以拖放LAS和LAZ文件，我们非常喜欢这一特性。无需转换为中间格式，因为 QGIS 3 可以处理原始点云格式。 QGIS3提供有基于类、高度和 RGB 属性来表示点云的选项。...在处理操作过程中，右下角的进度提示还要等待多久才能完成。处理完成后，输出将添加到你的地图中。可以在目录中的"Layer"选项卡中查看。...4、http://Plas.io - 最好的 Web LiDAR查看器在浏览器中查看激光雷达数据有可能吗？...下次你看到LAS文件时，可以试试GRASS。 GRASS GIS的设置把我折磨疯了，我只想逃地远远地。当你开始使用这个软件时，在启动屏幕上需要设置成千上万个参数。

5.6K4 0

微服务场景下的数据一致性解决方案 - saga

使用Saga的条件 Saga看起来很有希望满足我们的需求。所有长活事务都可以这样做吗？...通过将这些事件持久化在saga log中，我们可以将saga恢复到上述任何状态。...当服务处于不确定状态并与协调器失去连接时，它只能选择等待协调器的恢复，或者咨询其他在确定状态下的服务来得知协调器的决定。...因为在插入记录后服务可能崩溃，我们无法确定是否新事件已发送，所以每个服务还需要额外的事件表来跟踪当前长活事务处于哪一步。 ? 一旦长活事务中的最后一个服务完成其子事务，它将通知它在事务中的前一个服务。...在事务可补偿的情况下，相比TCC，saga对业务逻辑几乎没有改动的需要，而且性能更高。集中式的saga设计解耦了服务与数据一致性逻辑及其持久化设施，并使排查事务中的问题更容易。

1.1K2 0

高级前端react面试题总结

通过这样做， React 将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间React Hooks在平时开发中需要注意的问题和原因（1）不要在循环...，条件或嵌套函数中调用Hook，必须始终在 React函数的顶层使用Hook这是因为React需要利用调用顺序来正确更新相应的状态，以及调用相应的钩子函数。...提供了⼤量的Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来,形成⼀个⾮常实⽤的异步flow易测试...中，当涉及组件嵌套，在父组件中使用props.children把所有子组件显示出来。...可以这样：把Radio看做子组件，RadioGroup看做父组件，name的属性值在RadioGroup这个父组件中设置。

4.1K4 0

微服务分布式事务Saga模式简介

但是，传统2PC/ACID事务中在上面任何一个步骤失败时会使用回滚操作，比如第三步出错，因为是两段提交，所以，第二段就不会进行确认提交，而是进行回滚Rollback，这样订单状态就恢复到当前事务之前的状态...有两种可选方案：首先是当Saga流程全部完成时再发送响应，这样的好处是响应中带有处理结果，但是这样会降低可用性，CAP定理中，分布式环境中满足了C一致性，只能降低了可用性A。...3.如果会花费很长时间，可以显示“正在处理中...” 4.Saga处理完成后可以采取服务器推送结果到浏览器。 Saga是否实现了ACID？...ACID是原子性一致性隔离性和持久性的总称： 1.原子性是确保事务中所有步骤要么全部完成，要么全部撤销回滚。Saga可以在事务中任何一个步骤发生失败时，通过调用应用服务的回滚接口实现撤销。...和Choreography：各个服务之间没有一个协调点，靠服务自己相互直接协调，如果跳集体舞一样(当然有时会有一个领舞者，但是不明显)。

1.9K2 0

一文梭穿Vuex、Flux、Redux、Redux-saga、Dva、MobX

中间件刚才说到的都是比较理想的同步状态。在实际项目中，一般都会有同步和异步操作，所以 Flux、Redux 之类的思想，最终都要落地到同步异步的处理中来。...redux-saga 采用了另外一种思路，它没有把异步操作放在 action creator 中，也没有去处理 reductor，而是把所有的异步操作看成“线程”，可以通过普通的action去触发它，当操作完成时也会触发...举个例子： // saga.js import { take, put } from 'redux-saga/effects' function* mySaga(){ // 阻塞: take方法就是等待...异步数据获取的相关业务逻辑放在了单独的 saga.js 中，不再是掺杂在 action.js 或 component.js 中。...其实 redux-saga 是用一些学习的复杂度，换来了代码的高可维护性，还是很值得在项目中使用的。 Dva Dva是什么呢？

5.5K1 0

react高频面试题总结（一）

React Hook 的使用限制有哪些？React Hooks 的限制主要有两条：不要在循环、条件或嵌套函数中调用 Hook；在 React 的函数组件中调用 Hook。那为什么会有这样的限制呢？...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢？因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中，如果使用循环、条件或嵌套函数很有可能导致数组取值错位，执行错误的 Hook。...但是对于合成事件来说，有一个事件池专门来管理它们的创建和销毁，当事件需要被使用时，就会从池子中复用对象，事件回调结束后，就会销毁事件对象上的属性，从而便于下次复用事件对象。...EMAScript6版本中，作用域是可以改变的。为何React事件要自己绑定this在 React源码中，当具体到某一事件处理函数将要调用时，将调用 invokeGuardedCallback方法。...React Hooks在平时开发中需要注意的问题和原因（1）不要在循环，条件或嵌套函数中调用Hook，必须始终在 React函数的顶层使用Hook这是因为React需要利用调用顺序来正确更新相应的状态，

1.4K5 0

前端一面react面试题（持续更新中）_2023-02-27

尤雨溪在社区论坛中说道∶ 框架给你的保证是，你不需要手动优化的情况下，我依然可以给你提供过得去的性能。...为何React事件要自己绑定this 在 React源码中，当具体到某一事件处理函数将要调用时，将调用 invokeGuardedCallback方法。...React Hooks在平时开发中需要注意的问题和原因（1）不要在循环，条件或嵌套函数中调用Hook，必须始终在 React函数的顶层使用Hook 这是因为React需要利用调用顺序来正确更新相应的状态...除了在构造函数中绑定 this，还有其它方式吗你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。...在React中怎么使用async/await？ async/await是ES7标准中的新特性。如果是使用React官方的脚手架创建的项目，就可以直接使用。

1.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭