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

如何将多个saga添加到一个容器中(两个saga监听不同的操作)

在Redux-Saga中,可以将多个saga添加到一个容器中,使它们同时监听不同的操作。这可以通过使用redux-saga/effects中的allfork函数来实现。

首先,我们需要导入allfork函数:

代码语言:txt
复制
import { all, fork } from 'redux-saga/effects';

然后,我们可以定义多个saga函数,每个函数负责监听不同的操作。例如,我们有两个saga函数:saga1saga2

代码语言:txt
复制
function* saga1() {
  // 监听操作1
  yield takeEvery('ACTION_1', action1Handler);
}

function* saga2() {
  // 监听操作2
  yield takeEvery('ACTION_2', action2Handler);
}

接下来,我们可以创建一个根saga函数,将这两个saga函数添加到一个容器中:

代码语言:txt
复制
function* rootSaga() {
  yield all([
    fork(saga1),
    fork(saga2),
  ]);
}

在这里,fork函数用于创建一个非阻塞的子进程来运行每个saga函数。all函数用于并行运行多个saga函数。

最后,我们需要在应用程序的入口文件中启动根saga:

代码语言:txt
复制
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(rootSaga);

// 其他应用程序的初始化代码...

在这里,我们使用createSagaMiddleware函数创建一个saga中间件,并将其应用于Redux store。然后,我们使用sagaMiddleware.run方法来启动根saga。

现在,当应用程序触发ACTION_1时,saga1将会被调用并处理相应的操作。当应用程序触发ACTION_2时,saga2将会被调用并处理相应的操作。

需要注意的是,以上示例中的action1Handleraction2Handler是用来处理相应操作的处理函数,你需要根据实际情况进行定义和实现。

推荐的腾讯云相关产品和产品介绍链接地址:

请注意,以上链接仅供参考,具体选择适合的产品需根据实际需求和情况进行评估和决策。

相关搜索:如何将两个不同JTextField中的两个元素添加到一个JList中如何将多个(子)域绑定到traefik中不同端口的docker中的一个容器如何将不同表格中的多个产品添加到一个购物车中如何监听一个闪亮的observeEvent中的多个操作按钮以重新加载闪亮如何将来自两个不同数组的文本添加到标签中如何将两个不同的UIPickerView数据添加到单个标签中?如何将belongs_to添加到同一个表的两个不同列中?使用一个post请求在两个不同的类中插入操作如何将一个类同时添加到窗体中的多个标签如何将一个类的多个对象引用添加到flutter中的列表中?如何在rails中的一个方法上有两个不同的redirect_to操作?将两个select查询中的数据添加到一个表中,该查询针对两个不同表中的不同列数如何将来自两个不同类的两个不同数组列表组合成一个不同类中的新数组列表?如何将两个选择框中的两个值添加到一个URL跟踪如何将两个不同的自定义CSS添加到同一个ant-design DatePicker中PHP如何将另一个文件中的对象添加到不同JSON中的数组中将一个列表中的内容添加到多个不同大小的其他列表中,而无需重复如何将两个不同的apis响应逐个加载到一个recylverview中?将bash参数中的多个不同内容添加到sql脚本中的一个名为的变量集中如何获取多个列的不同值,且两个不同字段中的任意一个具有相同的反向数据
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React saga_react获取子组件ref

redux-saga简介 Redux-saga是Redux一个中间件,主要集中处理react架构异步处理工作,被定义为generator(ES6)形式,采用监听形式进行工作。...', fetchData) } takeLatest 对于触发多个action时候,只执行最后一个,其他会自动取消。...action不易维护原因: action形式不统一 就是异步操作太为分散,分散在了各个action 2.redux-saga一个hellosaga 跟redux-thunk,redux-saga...(plain object) 对比redux-thunk我们发现,redux-saga监听到了原始js对象action,并不会马上执行副作用操作,会先通过Effect方法将其转化成一个描述对象,然后再将描述对象...在saga.js文件监听两个方法并执行副作用函数,最后put发出转化后action,给reducer函数调用: function * watchUsername(){ while(true){

4.5K30
  • React-Redux-Saga

    Redux-saga 简介redux-saga 和 redux-thunk 一样, 是一个 Redux 获取存储异步数据中间件redux-saga 可以直接拦截 dispatch 派发 action..., 从而实现在执行 reducer 之前执行一些其它操作使用 Redux-saga安装 Redux-saganpm install redux-saga在创建 store 时应用 redux-saga...如上自定义函数已经获取到了网络数据,添加到 Redux 中保存是通过 Saga 提供 put 方法进行添加即可,在更改 store.js 告诉 saga 中间件生成器哪些通过 dispatch 派发...那么问题来了,如果想要验证如上博主所说这点,就必须要派发多次 action 那么该如何进行派发呢,正好可以借助该问题就可以引出一个全新知识点了那么就是连续派发多个 action,如果我们只需要拦截一个类型...即可,但是如果我们想同时保存多个数据 , 那么我们就必须借助另外一个函数, all():saga.js:import {takeLatest, put, all} from 'redux-saga/effects'import

    19930

    10分钟说透Saga分布式事务

    图1 单体到分布式系统架构过渡 在进行分布式部署之后,会存在多个服务共同完成一个事务操作,并且这些服务彼此都存在于不同服务器或者网络环境,服务之间需要通过网络远程协作完成事务称之为分布式事务。...也就是回滚整个Saga执行结果。 Saga分布式事务协调 上面介绍了Saga概念和事务恢复方式,每个事务存在多个子事务,每个子事务都有一个补偿事务,其在事务回滚时候使用。...由于子事务对应操作在分布式系统架构中会部署在不同服务,这些子事务为了完成共同事务需要进行协同。...下面通过一个例子来介绍这两种协调模式,假设有一个下单业务,从订单服务创建订单操作发起,会依次调用支付服务支付订单,库存服务扣减库存以及发货服务发货操作,最终如果所有参与者(服务)操作...“订单服务”执行“创建订单”操作,此时会发送一个“创建订单消息”到队列。 2. “支付服务”监听到队列这个订单消息,调用“支付订单”操作,同时也发送“只服务消息”到队列。 3.

    10.5K33

    Saga 事务

    Saga 事务Saga 事务核心思想是将"长事务拆分为多个本地短事务",由 Saga 事务协调器协调,如果正常结束那就正常完成, 如果"某个步骤失败,则根据相反顺序一次调用补偿操作"。...2、事件编排没有中央协调器(没有单点风险)时,每个服务产生并观察其他服务事件,并决定是否应采取行动。在事件编排方法,第一个服务执行一个事务,然后发布一个事件。...该事件被一个多个服务进行监听,这些服务再执行本地事务并发布(或不发布)新事件。...当涉及步骤较多,服务间关系混乱,难以追踪调测。由于 Saga 模型没有 Prepare 阶段,因此事务间不能保证隔离性。...当多个 Saga 事务操作同一资源时,就会产生更新丢失、脏数据读取等问题,这时需要在业务层控制并发,例如:在应用层面加锁,或者应用层面预先冻结资源。

    10200

    react项目架构之路初探

    github地址:https://github.com/majunchang/reactarch-explore 项目的引入背景 最近项目中,遇到了一个项目,多个页面存在多个表格,每一个表格都有相似的分页逻辑和不同查询参数...redux-saga 通过创建 Sagas 将所有的异步操作逻辑收集在一个地方集中处理,可以用来代替 redux-thunk 中间件。...(dispatch,getState),在函数体内进行业务逻辑封装 redux-thunk缺点: action形式不统一 ,异步操作太分散,分散在了各个action redux-saga本质是一个可以自执行...集中了所有的异步操作, 可以实现非阻塞异步调用,也可以使用非阻塞调用下事件监听 阻塞与非阻塞概念 异步操作流程可以人为手动控制流程 **seamless-immutable ** 关于immutable...reduxsauce 传统开发reducer中区分不同action 使用是switch case结构 针对每一个actiontype进行判断 使用reduxsauce之后 我认为 它和

    2.4K10

    Saga 模式| 如何使用微服务实现业务事务 第一部分

    一个事务由对应于系统操作外部请求启动,然后每个后续步骤由前一个完成触发。 使用我们之前电子商务示例,在一个非常高级设计Saga实现如下所示: ?...有几种不同方法来实现传奇交易,但最受欢迎两种方式是: 事件/Choreography(编舞):当没有中央协调时,每个服务产生并监听其他服务事件,并决定是否应该采取行动。...事件/编舞 在事件/Choreography(编舞)方法,第一个服务执行事务然后发布事件。该事件由一个多个服务监听,这些服务执行本地事务并发布(或不发布)新事件。...在上面的情况,如果需要跟踪订单状态,订单服务可以简单地监听所有事件并更新其状态。 分布式事务回滚 回滚分布式事务并非免费。通常,您必须实施另一个操作/事务来补偿之前已完成操作。...在下一篇文章,我将解释如何使用另一个名为Command / OrchestrationSaga实现解决Saga事件/编舞方法大部分问题。

    1.2K60

    一文理解分布式事务解决方案

    TCC其本质是一个应用层面上2PC,同样分为两个阶段,如下图所示: ?...,当多个Saga事务操作同一资源时,就会产生更新丢失、脏数据读取等问题,这时需要在业务层控制并发,例如:在应用层面加锁,或者应用层面预先冻结资源。...增加开发人员理解和维护代码难度。 基于本地消息表机制 本地消息表机制会在数据库存放一个本地事务消息表,在进行本地事务操作同时将操作状态插入到本地事务消息表。...Kafka事务消息则是用在一次事务需要发送多个消息情况,保证多个消息之间事务约束,即多条消息要么都发送成功,要么都发送失败。...XA规范了TM与RM之间通信接口(如下图所示函数),在TM与多个RM之间形成一个双向通信桥梁,从而在多个数据库资源下保证强一致性。

    65820

    2022社招react面试题 附答案

    总结: componentWillMount:在渲染之前执行,用于根组件 App 级配置; componentDidMount:在第一次渲染之后执行,可以在这里做AJAX请求,DOM操作或状态更新以及设置事件监听器...批量更新策略会对其进⾏覆盖,取最后⼀次执⾏,如果是同时setState多个不同值,在更新时会对其进⾏合并批量更新。...两者对⽐: redux将数据保存在单⼀store,mobx将数据保存在分散多个store redux使⽤plain object保存数据,需要⼿动处理变化后操作;mobx适⽤observable...redux-saga优点: 异步解耦:异步操作被被转移到单独saga.js,不再是掺杂在action.js或component.js; action摆脱thunk function: dispatch...try/catch语法直接捕获处理; 功能强⼤:redux-saga提供了⼤量Saga辅助函数和Effect创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤; 灵活:redux-saga可以将多个

    2.1K10

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

    View 通过订阅也好,监听也好,不同框架有不同技术,反正 Store 变了,View 就会变。 View 不是光用来看,一般都会有用户操作,用户点个按钮,改个表单啥,就需要修改 Store。...处理异步 对于异步操作来说,有两个非常关键时刻:发起请求时刻,和接收到响应时刻(可能成功,也可能失败或者超时),这两个时刻都可能会更改应用 state。...mutation 是必须同步,这个很好理解,和之前 reducer 类似,不同步修改的话,会很难调试,不知道改变什么时候发生,也很难确定先后顺序,A、B两个 mutation,调用顺序可能是 A -...redux-saga 采用了另外一种思路,它没有把异步操作放在 action creator ,也没有去处理 reductor,而是把所有的异步操作看成“线程”,可以通过普通action去触发它,当操作完成时也会触发...而且很容易测试到不同分支。 这里不讨论更多 saga 细节,大家了解 saga 思想就行,细节请看文档。

    5.5K10

    单向数据流-从共享状态管理:fluxreduxvuex漫谈异步数据处理

    Flux 有一些缺点(特点),比如一个应用可以拥有多个 Store,多个Store之间可能有依赖关系;Store 封装了数据还有处理数据逻辑。...action 可以理解为应用向 store 传递数据信息(一般为用户交互信息) dispatch(action) 是一个同步过程:执行 reducer 更新 state -> 调用 store 监听处理函数...redux-saga 采用了另外一种思路,它没有把异步操作放在 action creator ,也没有去处理 reductor,而是把所有的异步操作看成“线程”,可以通过普通action去触发它,当操作完成时也会触发...redux-saga 把异步获取数据这类操作都叫做副作用(Side  Effect),它目标就是把这些副作用管理好,让他们执行更高效,测试更简单,在处理故障时更容易。...Vuex相对于Redux不同点有: 改进了ReduxAction和Reducer函数,以mutations变化函数取代Reducer,无需switch,只需在对应mutation函数里直接改变

    3.7K40

    百度前端必会react面试题汇总

    这两种模式仍然有一席之地(例如,一个虚拟 scroller 组件可能有一个 renderItem prop,或者一个可视化容器组件可能有它自己 DOM 结构)。...,在异步如果对同一个值进行多次 setState,setState 批量更新策略会对其进行覆盖,去最后一次执行,如果是同时 setState 多个不同值,在更新时会对其进行合并批量更新合成事件是异步钩子函数是异步原生事件是同步...4)监听数据变化实现原理不同Vue 通过 getter/setter 以及一些函数劫持,能精确知道数据变化,不需要特别的优化就能达到很好性能React 默认是通过比较引用方式进行,如果不优化(...redux-saga优点:异步解耦:异步操作被被转移到单独saga.js,不再是掺杂在action.js或component.js;action摆脱thunk function: dispatch参数依然是.../catch语法直接捕获处理;功能强⼤:redux-saga提供了⼤量Saga辅助函数和Effect创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤;灵活:redux-saga可以将多个Saga

    1.6K10

    分布式事务Saga模式「建议收藏」

    大家好,又见面了,我是你们朋友全栈君 微服务架构(MSA)已经变得非常流行。但是,一个常见问题是如何跨多个微服务管理分布式事务。...当微服务架构将单体系统分解为自封装服务时,意味着单体系统本地事务现在分布到将按顺序调用多个服务。 说到分布式事务,通常熟悉是两阶段提交,TCC等常见模式。...Saga事务是一个长事务,整个事务可以由多个本地事务组成,每个本地事务有相应执行模块和补偿模块,当Saga事务任意一个事务出错了,可以调用相关事务进行对应补偿恢复,达到事务最终一致性。...它与2PC不同,2PC是同步,而Saga模式是异步和反应性。在Saga模式,分布式事务由所有相关微服务上异步本地事务完成。微服务通过事件总线相互通信。...在OrderMicroservice监听到该事件并启动其补偿事务恢复所创建订单。 Saga模式优点 Saga模式一大优势是它支持长事务。

    1.3K10

    聊聊分布式解决方案Saga模式

    Saga模式 Saga模式使用一系列本地事务来提供事务管理,而一个本地事务对应一个Saga参与者,在Saga流程里面每一个本地事务只操作本地数据库,然后通过消息或事件来触发下一个本地事务,如果其中一个本地事务失败了...,Saga就会执行一系列补偿事务来实现回滚操作。...是一种去中心化模式,参与者之间通过消息机制进行沟通,通过监听方式监听其他参与者发出消息,从而执行后续逻辑处理。由于没有中间协调点,靠参与者自己进行相互协调。...这些实现,可以大致可以分为两类 状态机实现 Seata 这一类典型实现有seatasaga,他引入了一个DSL语言定义状态机,允许用户做以下操作: 在某一个子事务结束后,根据这个子事务结果,决定下一步做什么...官方例子是一个包含两个子事务全局事务,Json格式状态机定义大约有95行,较难入门。

    31510

    React之redux学习日志(reduxreact-reduxredux-saga

    使用纯函数执行修改:reducer,应该返回一个纯函数,函数接受先前 state和action, 然后返回一个 state 3....当我们需要执行一些异步操作时,由于action只能返回一个对象,从而需要借助一些中间件来达到目的,redux-thunk 和 redux-saga是常见两种中间件。   ...redux-thunk 主要是使action能够返回一个函数而达到目的,这样导致了action函数变得复杂   redux-saga 可以将异步操作单独分离出来封装到某些模块,这样保证action函数更加干净...'create-action' /** 在create-action.js新增一个action(当然在reducer.js也要对state就行对应操作) * export const updateUserInfoAction...function* testSaga() { // 当action-type被准备dispatch时,执行 getUserInfo // 声明 effects 函数:takeEvery 监听一个

    54830

    八大流行微服务架构设计模式探究

    一个典型微服务架构,要实现顺畅开发,可采用设计模式不止八种。在本节,我们将详细地探究这些模式。我们根据应用程序类型将它们分为两个部分——新应用程序和遗留应用程序。...典型业务事务可能涉及由不同团队开发多个服务查询、连接或数据持久化操作。...Saga 模式 如果我们为每一个服务使用一个数据库,在实现跨多个微服务事务时就会出现问题。在这种情况下,我们该如何保持数据一致性?...本地 ACID 事务在这里不起作用,解决办法就是采用 Saga 模式。Saga 是一种本地事务链,事务链一个事务更新数据库并发布一个事件来触发下一个本地事务。...在编配实现,只有一个组件需要协调所有事件,而在编排实现,每个微服务都必须监听和响应事件。

    43520

    分布式事务saga开源实现_spring分布式事务解决方案

    非常高层次级Saga设计实现如下所示: 实现方式一:事件/编排Choreography 在Events/Choreography方法,第一个服务执行一个事务,然后发布一个事件。...该事件被一个多个服务进行监听,这些服务再执行本地事务并发布(或不发布)新事件。...回滚分布式事务并不是免费。通常情况下,您必须实施额外操作才能弥补以前所做工作。 假设库存服务在事务过程失败了。...2.在命令Command添加回复地址 可以考虑像在消息中发送回复地址,而不是让参与者回复固定地址,这样您可以让参与者回复多个协调人。...3.幂等操作 如果您使用队列进行服务之间通信(如SQS,Kafka,RabbitMQ等),我个人建议您将您操作设置为幂等。这些队列大多数可能会传递相同消息两次。

    50220
    领券