问题标签 [ngrx-store]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
4 回答
26225 浏览

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

可以影响像 Promise.all 这样的两个操作吗?例子:

更新 我想要实现的是与 Promise.all 类似的行为。如何并行调度两个效果,等到所有效果都解决后,再调度第三个动作。像https://redux-saga.js.org/docs/advanced/RunningTasksInParallel.html这样的东西有了承诺,这很明显:

在ngrx/effects中可能吗?还是ngrx / effects中的错误方式?

回答

您可以使用几个选项:

1) 不要使用通用动作。

遵循 Myke Ryan 演示中的这些规则:https ://youtu.be/JmnsEvoy-gY

优点:更容易调试

缺点:大量的样板和动作

2) 使用带有嵌套动作的复杂流。

检查这篇文章:https ://bertrandg.github.io/ngrx-effects-complex-stream-with-nested-actions/

这是两个操作的简单示例:

优点:你可以实现你想要的

缺点:复杂的流太复杂,无法支持 :) 看起来很丑,而且可能很快就会变成地狱,observables 在操作成功或失败之前不会取消订阅,这意味着理论上任何第三方操作都可以向这些 observables 发出信号。

3)使用聚合器模式。

查看 Victor Savkin 关于 NgRx 的状态管理模式和最佳实践的演讲:https: //www.youtube.com/watch? v=vX2vG0o-rpM

这是一个简单的例子:

首先,您需要使用相关 ID 参数创建操作。CorrelationId 应该是 uniq,例如它可能是一些 guid。您将在操作链中使用此 ID 来识别您的操作。

然后我们的效果:

优点:与第 2 点相同,但没有第三方操作。

缺点:与第 1 点和第 2 点相同

4) 不要对 API 使用效果。使用模拟效果但返回 Observable 的良好旧服务。

为您服务:

所以你可以在以后的任何地方组合它,比如:

5)使用ngxs:https ://github.com/ngxs/store

优点:样板更少,这感觉像是有棱角的东西,它增长很快

缺点:功能比ngrx少

0 投票
0 回答
332 浏览

angular - 如何将 ngrx/store 与 Angular 4 路由器同步

目前我没有路由,但我确实有一个默认状态和一组工作减速器。简化版本如下所示:

然后我有一些操作该状态的操作,例如:

  • MAP_SET_BASELAYER
  • MAP_ADD_OVERLAY
  • MAP_REMOVE_OVERLAY

我正在尝试支持以下场景:

  1. 有 2 个 URL 参数,baselayer 和 overlays。在应用程序初始化时,使用这些值来设置状态。如果缺少值,请从 defaultState 中获取该变量的值。
  2. 在每个动作之后,执行某种中间件以将路由与当前状态同步。
  3. 如果 URL 更改(没有被操作触发)更新状态。

我在这里迷路了。我找到了“@ngrx/router-store”,但我不确定它是如何工作的,以及它是否旨在解决这些问题。

0 投票
1 回答
801 浏览

angular - RxJS 订阅数组:查看更改

我正在使用 ngrx/store 来跟踪一组活动层(要显示在地图上)。

在我的组件中,我订阅了这个变量:

现在的情况

  • 添加layer_3时得到['layer_1', 'layer_2', 'layer_3']

  • 删除 layer_2 时,我得到['layer_1', 'layer_3']

我试图实现的目标而不是当前情况下的一个数组。我想要两个数组。一个包含所有添加,一个包含所有删除。

欢迎不同的方法。关键是我想把它存储在ngrx/store中。

这些只是我的第一步。在我的最终应用程序中,我想支持可以添加、删除但也可以移动的航路点。当移动一个航点时,我需要在数组中读取它之前和之后的航点以操纵(计算和重绘)路线。

更新:显然 RxJS 有一个 Observable.ofArrayChanges 但在 RxJS 5 中已被弃用。

0 投票
1 回答
1454 浏览

angular - Angular2 Ngrx 影响服务加载并点击两次我的服务

我尝试使用 Ngrx 效果服务,但它似乎达到了我的要求的两倍

我的派遣

效果服务:

我的服务

我的行动

我的减速机

我最终得到了两个 http 请求和 2 个响应!

感谢您的帮助

0 投票
1 回答
413 浏览

angular - Angular NGRX - 为 Redux-Devtools 命名 store/app-instance

我在使用 Redux-Devtools 插件(适用于多个浏览器)时遇到问题。如此多的网站使用 Redux 模式,以至于我自己的应用程序经常被取消选中。有谁知道如何命名商店,所以插件不显示 14/ngrx-store-somehash 而是我的应用程序的名称作为所选实例?

0 投票
2 回答
1339 浏览

angular - Ngrx 选择运算符不起作用

我的ngrx store有问题,奇怪的问题!select算子不调用回调函数,订阅store的时候可以看到app的状态(初始状态和修改状态)

在此处输入图像描述

0 投票
1 回答
216 浏览

ngrx - 在这个@ngrx 效果示例中,reduce 函数做了什么?

在这个@ngrx 效果示例中,下一行中的reduce函数是做什么的?

不能newBooks用来代替newBookEntities吗?

0 投票
1 回答
364 浏览

angularjs - 如何使用@ngrx store 进行搜索操作?

我的 Angular 应用程序中有一个联系人集合(所有员工的联系人)。它类似于任何联系人或地址应用程序,其中有联系人并且您可以搜索姓名。当搜索“约翰”之类的名字时,应用程序应该只显示带有“约翰”的名字。

联系人已保存在MSSQL DB.

我的问题是我应该如何管理状态@ngrx store

  • 我应该从应用程序启动时读取所有联系人MSSQL DB,然后@ngrx store使用reselect选择器在其中进行名称搜索以获取搜索结果吗?
  • 每次搜索完成时,我是否应该在 中进行搜索,MSSQL DB然后清除并加载搜索结果?@ngrx store
0 投票
1 回答
124 浏览

angular - 在一个 NgEffects 中链接两个服务器调用

我正在使用ngrx,但我不知道如何在一个ngEffect 中链接两个服务器调用。你知道怎么做吗?我需要你的帮助。

在此行为中,第一个呼叫被中断,仅处理第二个呼叫

编辑

减速机功能

和调度动作

编辑

0 投票
2 回答
770 浏览

angular - @ngrx/store 没有正确订阅选择

我使用@ngrx/store、@ngrx/efffects 创建了以下 Angular 2 应用程序

好的,所以这些行似乎有问题:

this.persons$ = store.select((state: State) => state.persons);

当我mainStoreReducer{}选择中使用时似乎无法正常工作。但是,如果我这样做,StoreModule.provideStore(mainStoreReducer)那么它会奇迹般地工作!显然我不能只这样做,因为那只是一个减速器,所以在一个正常的项目中我会有多个。

任何人都知道出了什么问题。喜欢的请直接看github项目https://github.com/cgeo7/ngrx_tests_websockets_spring-boot 正常构建。

编辑:我已经进行了这些修改,但我看到问题是状态在层次结构的第一级具有减速器对象,它包含实际状态。此外,如果我添加第二个减速器,它永远不会像mainStoreReducer. 这里有问题

在此处输入图像描述