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

如何在@ngrx/effects中等待2个动作

@ngrx/effects 是 Angular 的一个库,用于处理 Redux 风格的状态管理中的副作用。在这个库中,你可以创建 effects 来监听 actions,并执行异步操作,比如 API 调用。如果你想要在一个 effect 中等待两个 actions 完成后再执行某些操作,你可以使用 RxJS 的操作符来实现。

以下是一个基本的示例,展示了如何在 @ngrx/effects 中等待两个 actions:

代码语言:txt
复制
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap, withLatestFrom } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { ActionOne, ActionTwo, actionOneSuccess, actionTwoSuccess } from './actions';

@Injectable()
export class MyEffects {
  constructor(
    private actions$: Actions,
    private store: Store<any>
  ) {}

  // Effect to wait for ActionOne and ActionTwo to complete
  myEffect$ = createEffect(() =>
    this.actions$.pipe(
      ofType(ActionOne, ActionTwo),
      withLatestFrom(
        this.store.select(state => state.actionOneCompleted), // Selector for ActionOne completion
        this.store.select(state => state.actionTwoCompleted)  // Selector for ActionTwo completion
      ),
      filter(([action, actionOneDone, actionTwoDone]) => actionOneDone && actionTwoDone),
      map(() => {
        // Both actions are completed, perform your operation here
        return { type: 'BOTH_ACTIONS_COMPLETED' };
      }),
      catchError(error => of({ type: 'ERROR_OCCURRED', payload: error }))
    )
  );
}

在这个例子中,withLatestFrom 操作符用于结合两个 observables:一个是 actions$,它发出 ActionOneActionTwo;另外两个是来自 store 的 selectors,它们分别检查 ActionOneActionTwo 是否已经完成。filter 操作符确保只有当两个 actions 都完成时,才会继续执行 effect。

请注意,这个例子假设你的 reducers 在 ActionOneActionTwo 成功后设置相应的完成状态。你需要根据你的实际应用逻辑来调整 selectors 和 action 类型。

如果你遇到了具体的问题,比如 effect 没有按预期工作,可能的原因包括:

  1. Selectors 没有正确地从 store 中获取状态。
  2. Action types 不匹配或者没有正确地触发。
  3. Effect 中的操作符使用不当。

解决这些问题通常需要检查你的 action creators、reducers 和 selectors 是否正确实现,并确保 effect 的逻辑与你的应用状态管理逻辑相匹配。

参考链接:

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

相关·内容

一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

在这个Angular 5教程,我们将从头开始构建一个笔记应用程序。如果您一直在等待学习Angular 5,本教程适合您。 ? 应用程序的最终源代码可以在这里找到。...答案在这个定义是正确的。Ngrx对救援的副作用。 Ngrx效应 那么什么是副作用?...为此,我们安装effects模块: yarn add @ngrx/effects [...] success Saved 1 new dependency. └─ @ngrx/effects@4.1.1...} from '@ngrx/effects'; import {CardService} from '.....如果我们仔细观察控制台,我们会看到两个LoadSuccess动作先按照它应该与我们的新卡一起分派,然后第二个动作与我们的两张卡一起分派。如果不起作用,我们的行动哪里会派遣?

42.6K10
  • 体验超凡的Adobe After Effects 2023,设计与动效完美结合+全版本安装包

    在不断的创新和进化,Adobe After Effects 2023正式发布啦!这个最新版本相较于前代版本有着更强大、更智能的功能和性能优化。...软件全版本安装包获取指南:zyku666.com 为了实现更加精彩的视觉效果,在Adobe After Effects 2023,全新的高效场景分层技术可以提升视频特效的处理速度,并且突破图层数量和分层深度的限制...Adobe After Effects 2023还在全球首次引入了全新的空气体感控制技术。它能够将手势和身体动作直接转化为用户在编辑视频和图形设计动作和指令。...最后,在多平台支持方面,Adobe After Effects 2023同样得心应手。...2.等待程序运行,然后可以修改安装位置 3.等待安装程序加载 4.安装完成点击关闭 5.开始菜单栏找到软件图标双击进入即可。

    26900

    写在 2021: 值得关注学习的前端框架和工具库

    对于我认为较为主流的则不会包含(Vue与React框架本身这种~)。...IceStore[3],淘系Ice团队出品的状态管理库,我在日常业务中使用最多的一个状态管理方案,亮点是基于Immer来实现数据不可变,整体的使用方案类似Dva,state + reducer + effects...优点是有非常多的插件(plugin)和模板(starter),并且支持很多CMS(Contentful、Neltify等),适合喜欢在线写文档的。...在TS这个工具的主要能力就是生成TS的类型定义,同时它的插件体系还提供了更多的额外能力,Apollo-Client的插件,让你可以直接使用封装好的的useXXXQuery等,前端连查询语句都不用写了...秉承了Angular的思想,提供了一整套的集成:和Angular Router的集成:@ngrx/router-store;对于集合类型的适配:@ngrx/entity;副作用管理:@ngrx/effects

    4.2K10

    写在2021: 值得关注学习的前端框架和工具库

    对于我认为较为主流的则不会包含(Vue与React框架本身这种~)。...IceStore,淘系Ice团队出品的状态管理库,我在日常业务中使用最多的一个状态管理方案,亮点是基于Immer来实现数据不可变,整体的使用方案类似Dva,state + reducer + effects...在TS这个工具的主要能力就是生成TS的类型定义,同时它的插件体系还提供了更多的额外能力,Apollo-Client的插件,让你可以直接使用封装好的的useXXXQuery等,前端连查询语句都不用写了...秉承了Angular的思想,提供了一整套的集成:和Angular Router的集成:@ngrx/router-store;对于集合类型的适配:@ngrx/entity;副作用管理:@ngrx/effects...,以及必不可少的schematics:@ngrx/schematics等,最大的优势是和RxJS的深度集成。

    2.9K10

    Red Giant Trapcode Suite for Mac(红巨星粒子插件)2023.0.0激活版

    全新发布Trapcode 插件合集是专为行业标准而设计的,功能一既往的强大,能灵活创建美丽逼真的效果。...使用路径和动作生成精美复杂的几何形状,色带和挤压。无论您是创建动态图形还是视觉效果,都是无穷无尽的。4.灯光和光芒为您的运动设计带来光明和生命。模拟有机,3D相机感知体积照明。...使用蒙版和路径添加可以使您的徽标和文字生动的亮条纹,并添加星光闪烁以突出您作品的亮点。5.声音和动作使用音频生成驱动动画和效果的关键帧。缩放,旋转并移动到节拍,或使用鼓点击创建粒子效果。...将粒子对象溶解在流体或创建复杂的分形动画。使用3D模型和动画OBJ序列创建令人惊叹的MoGraph。用声音驱动动画并解散文本和徽标。...•  TRAPCODE MIR(新)使用Trapcode Mir在After Effects创建3D对象,分形曲面,地形和线框。为运动图形设计流动表面和抽象形状或导入3D OBJ模型。

    90510

    React saga_react获取子组件ref

    举个例子,我们要改写下面这行代码: yield fetch(url); 应用saga: yield call(fetch, url) take 等待 dispatch 匹配某个 action 。...call 有阻塞地调用 saga 或者返回 promise 的函数,只在触发某个动作。 takeEvery 循环监听某个触发动作,我们通常会使用while循环替代。...一旦监听到login动作,返回的action为: { type:'login' } call(apply) call和apply方法与js的call和apply相似,我们以call方法为例: call...takeEvery和takeLatest takeEvery和takeLatest用于监听相应的动作并执行相应的方法,是构建在take和fork上面的高阶api,比如要监听login动作,好用takeEvery...用框图可以更清楚的分析: call方法调用阻塞主线程的具体效果如下动图所示: 白屏时为请求列表的等待时间,在此时,我们点击登出按钮,无法响应登出功能,直到请求列表成功,展示列表信息后,点击登出按钮才有相应的登出功能

    4.5K30

    探索新版Adobe After Effects 2019为视频后期制作带来全新体验

    Adobe After Effects是一种数字视觉效果、动态图形和合成软件,常常用于影视后期制作。...在使用After Effects进行视频剪辑的过程,人们可以使用各种标准的视觉元素进行操作——比如录像、照片、图像、动画和音乐等等,这些元素可以被视作是制作过程的积木和模块。...综上所述,Adobe After Effects是一款非常强大的高级视频制作软件。...除了常用的颜色校正、慢动作、和时间拉伸等特效外,它还包括了精美细致的各种艺术效果,光线、烟雾效果、3D立体效果,深受专业从业人员的赞赏。...14.弹出的对话框中选择。15.选择刚才粘贴的,右击选择然后选择,。16.双击打开AE2019软件。17.软件安装成功

    39000

    点亮创意之花Adobe After Effects 2022打造出眼前一亮的后期特效+全版本安装包

    此外,Adobe After Effects 2022还支持3D渲染和组合,因此在需要仿照或复制现实世界的特效时,使用3D效应非常有用。...包含了各种实用的后期制作工具,动画通道、深度效应、运动追踪、掩膜等,使得用户能够在制作过程中加强特效让视频更具魅力。...Adobe After Effects 2022具有逐帧动画的功能,这为制作流畅的动画效果提供了优秀的特性。...此外,Adobe After Effects 2022还支持各种输出格式,并且能够便捷地导出至其它Adobe软件,Photoshop和Premiere Pro,在制作过程的合作工作变得相对容易。...Adobe After Effects 2022安装步骤:1、选中安装包,右键解压并打开2、选中安装文件,右键“以管理员身份运行”3、选择安装位置,点击“继续”4、软件正在安装,请耐心等待5、软件安装完成

    29510

    影视后期制作AE软件下载各版本下载 Adobe After Effects干货分享

    After Effects是一款电影、电视和Web等行业中使用频率很高的领先视频编辑厂创作软件。它可以创建电影级影片字幕、片头和过渡,从剪辑删除物体,并且支持制作动画效果。...等待安装即可点击关闭 点击关闭打开软件,至此软件安装破解成功 打开软件,至此软件安装破解成功 可选轨道遮罩图层 使用模式列的新下拉菜单,选择任意图层作为轨道遮罩。...本机 H.264 编码 使用硬件加速输出和直接渲染渲染队列的 H.264 文件的功能,可以快速导出项目,让您能够灵活地选择从 After Effects 本机导入或使用 Adobe Media Encoder...合成预设 After Effects 合成预设列表已彻底修改,可让您更轻松地找到更常用的预设。此预设还包括社交媒体输出的大小 AE 2023版本特色 创建电影级影片字幕、片头和过渡。从剪辑删除物体。...或从数百种预设和效果中进行选择,快速让您的视频栩栩生。 在 After Effects 创建合成,并使用 Dynamic Link 消除 Adobe Premiere Pro 的中间渲染。

    78310

    【译】我是如何学习任意前端框架的

    在这篇文章,我将向你展示我学习前端框架的经验以及这些框架如何彼此相似的。 每次你决定学习前端框架时,你定会反复听到这些术语(组件,路由和管理状态/状态管理)。...在这篇文章,真实的测试伴随着现实的真正问题,会带给你些启发,并应用在你选择的任何前端框架的项目中。 笔记: 该主题中列出的项目难度逐渐递增,每个项目会在前一个项目基础增加。...某些页面只允许通过身份验证的用户(访问) 如何发送并保存JWT(JSON Web令牌)以发出需要经过身份验证的用户请求 3.CRUD App 增删查改的应用程序是本节中最受欢迎的前端应用程序,你可以使用本地存储或者使用在线服务(Firebase...但在本节,我们尝试使用web sockets来构建聊天应用程序,它是双向的,我们不能(总是)等待响应来更新视图,我们需要另一种方法来管理我们的客户端状态。...你将学到: 学习如何使用管理状态解决方案,redux for react, ngrx for angular 2+ 或 vuex for vuejs以及如何将其与客户端应用程序集成 使你的应用更灵活

    3.6K10

    Trapcode Suite 15 for Mac(AE红巨星粒子套装插件)

    AE红巨星粒子插件合集最新版是专为行业标准而设计的,功能一既往的强大,能灵活创建美丽逼真的效果。...trapcode suite mac中文版插件简介 Trapcode Particular for Mac是一款可视化粒子效果创建工具,是Adobe After Effects粒子系统创建的行业标准。...使用蒙版和路径添加可以使您的徽标和文字生动的亮条纹,并添加星光闪烁以突出您作品的亮点。 声音和动作 使用音频生成驱动动画和效果的关键帧。缩放,旋转并移动到节拍,或使用鼓点击创建粒子效果。...插件下载地址:Trapcode Suite 15 for Mac(AE红巨星粒子套装插件) v15.1.3文版 软件下载地址:After Effects 2022 for Mac(ae 2022) v22.6.0...文版 windows软件安装:After Effects 2022(AE 2022)

    76830

    Adobe Ch 各版本软件下载安装方法+ 版本功能介绍

    4.软件安装……5.安装完成点击关闭。6.Win菜单栏 找到 After Effects 2022软件 点击打开。7.软件安装完成,运行界面如下。...Character Animator 使用您的实时表情和动作将人物动起来。因此,当您微笑或点头时,您的人务也会做出相同的动作。生成速度非常快,您甚至可以直播流式动画。...或通过修改Character Animator可用的内置角色模板或从Illustrator或Photoshop导入插图来创建角色。摆出你最好的脸通过自己的表演轻松使您的角色栩栩生。...动作可以保存为按钮,因此比键盘命令更容易记住。好戏开场了看看使用Character Animator实时将他们的角色栩栩生的好莱坞制片厂,广播公司和在线内容创建者。...因此,您可以将自己的角色变成现实,或者将其带入Premiere Pro或After Effects以包含在较大的项目中。这是下一代动画工具。现在有空。

    46910

    软件下载ae2022 AE 2021安装教程 ae2022 AE苹果下载

    与主流3D软件也可良好结合,Softimage|XSI,Maya,Cinema4D,3ds MAX等。...最新版本为After Effects CC也就是After Effects 20.0,该版本目前已随AdobeCreative Cloud发布。...图片2、解压,请稍等一会。。。3、双击进入解压后的文件夹。4、右键点击“Set-up”应用程序文件,选择以管理员身份运行。图片5、点击“文件夹”小标志,选择“更改位置”。...图片8、软件正在安装,请耐心等待几分钟。。。图片9、软件安装完成之后,直接点击“关闭”即可。图片10、点击电脑桌面左下角“Win”图标,在菜单栏中找到“AE2021”图标并将之拖拽至桌面。...Adobe After Effects简称“AE”,是一款图形视频处理软件,适用于从事设计和视频特技的机构,包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。属于层类型后期软件。

    83620

    Character Animator 2023升级,全新AI算法为2D人物动画增添灵魂+全版本安装包

    软件全版本安装包获取指南:zyku666.comCharacter Animator软件集成了一些先进的技术,面部识别、嘴唇同步技术、头部跟踪和自然语音合成技术等。...此外,用户还可以添加其他的动作效果,手臂和腿部的移动、面部表情和眼睛的动作等。该软件还提供了一个虚拟视频生成器,用户只需将2D素材输入到软件中进行编辑,就能够得到高质量人物动画视频。...在Adobe Creative Cloud套餐,Character Animator软件可以集成到其他创作应用程序。...例如,用户可以使用Adobe After Effects将角色动画与音频、视频以及特效合成在一起。这使用户能够更加高效地制作人物动画,同时还可以在一个项目文件中进行更多的编辑和修改。...请稍等...6.软件安装完成,点击关闭;7.在桌面找到最新下载的Ch 2023软件,双击打开;8.软件正在加载...

    47330

    ch-Character Animator 2022 下载安装教程讲解+各版本安装获取

    可以从右上方的“行为”面板拖放行为。可以使用背景按钮更改背景。可以调整长宽比来缩放人偶以适合新的尺寸。您可以预览可触发的姿势、情绪和背景。快速导出功能支持以 H264 文件格式直接导出动画。...Ch2022安装方法:1.鼠标右键解压到“Character Animate 2022”2.找到并选中Set-up,鼠标右键点击“以管理员身份运行”3.选择软件安装路径,点击“继续”4.软件正在安装,请耐心等待...轻松重用您的最佳拍品全新的重播功能使您可以选择最佳的笑声或定时限的拳头撞击,并创建触发器,以便您可以在现场或下一次录音重复使用。调整“重播”触发器的长度,以轻松适应场景。...或通过修改 Character Animator 内置的人物模板、从 Illustrator CC 或 Photoshop 中导入作品来创建人物。 2、将面部表情呈现给观众。...因此您可以实时呈现自己的角色,也可将其导入 Premiere Pro 或 After Effects ,以便用于更大的项目中。这是新一代的动画工具。

    1K00

    AE安装AE下载Ae多版本下载-Adobe After Effects版本介绍干货分享

    8、软件正在安装,请耐心等待几分钟。。。 9、软件安装完成之后,直接点击“关闭”即可。 10、双击电脑桌面新生成的“AE2022”软件图标启动软件。 11、软件打开正常,安装成功。...从剪辑删除对象。生火或下雨。为徽标或角色制作动画。借助行业标准的动态图形和视觉效果软件 After Effects,您可以将任何想法付诸实践。...并创建 VR 视频,让您的观众直接进入动作的中心。 获得动画。 设置任何运动。从徽标到形状再到卡通。使用关键帧或表情。或者使用预设来启动您的设计并获得独特的结果。 和别人玩得很好。...After Effects 可与其他 Adobe 应用程序无缝协作。使用 Adobe Dynamic Link 创建合成并立即查看它们在 Premiere Pro 的外观。...After Effects 与 300 多个软件和硬件合作伙伴集成。 快速轻松地从视频剪辑删除对象 想要从您的镜头中删除对象或人物吗?使用内容感知填充,快速删除不需要的项目。无需逐帧屏蔽或剪切。

    2.1K20
    领券