问题标签 [ngrx]

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 投票
1 回答
344 浏览

angular - 当路由激活时调度一个动作

我有几个路由,每个路由都有一个应该从服务器加载数据的表。当带有表的路由变为活动状态时,如何向 ngrx/store 发送操作以从服务器加载数据?

谢谢

0 投票
2 回答
1153 浏览

angular - Angular2 - 在减速器之间共享动作是一个坏主意吗?

我们在 Angular 2 应用程序中使用 ngrx / store。我们的 store 是由 Reducers 组合而成的"cameraReducer", "subjectReducer"……我们希望维护一些全局和通用(跨不同功能)项目,例如"appReducer".

{type:LOADING_*, payload}在这样的场景中,共享一个像between individualReducersand之类的动作有意义appReducer吗?这应该在一个功能(可以被认为是一个单一的数据操作[使用单个 Reducer 和单个操作] 或多个相关数据操作 [使用多个 reducer 和多个操作])启动和关闭时打开一旦完成。appReducer 可能如下所示:

Adv - 没有样板。缺点 - 减速器的顺序将在指示器何时打开/关闭方面发挥作用。

或者

我们可以在调用每个功能的开头/结尾处编写代码

Adv - 指示器弹出/关闭的受控顺序。缺点 - 用于打开/关闭加载的样板代码。

或者

我们可以尝试将“loading”计算为组合的 observables(每个 reducer 都有自己的本地“loading”属性和该属性的 Observable)。

Adv - No Boilerplate 和 Controlled Order on 指示器开/关。缺点 - 增加的复杂性和更多的代码可能是。

0 投票
1 回答
1928 浏览

reactjs - 围绕 Angular2 的架构模式:Redux、Flux、React、Reactive、RxJS、Ngrx、MVI、

这些库/框架的所有名称都以字母 R/N 开头或听起来非常相似;保证刺激:

反应/还原 | 助焊剂 | ngrx | @ngrx/商店 | RxJS/ReactiveX | MVI | ……

谁能看穿这种疯狂? 我想澄清一下,如果我错了,请帮助我:

Redux是 JavaScript 应用程序的“可预测状态容器”,也是Flux的轻量级实现。我可以说:它是 Angular2 的通量的标准实现吗?(但也有关于没有 Angular2的 redux的精彩学习视频。)

Flux是 Facebook 用于构建客户端 Web 应用程序的应用程序架构。它通过利用单向数据流来补充React (ReactJS)的可组合视图组件。但通量只是一种模式,而不是一种实现。

React (ReactJS)Angular2 (angular.io)的主要竞争对手,尽管它是一个比框架更大的库。

JavaScript 的反应式扩展 (RxJS)是一个反应式流库,允许您使用异步数据流。它追求反应式宣言的目标。

Angular2 有它自己的响应式扩展,它们被称为Ngrx - Angular2 的响应式扩展。

然后是@ngrx/store 之类的东西,它是由 RxJS 驱动的状态管理,灵感来自 Redux for Angular 2 应用程序。哎呀,雏菊!

作为 Flux 的替代方案,André Staltz提出了基于 RxJS Observables 的单向Model-View-Intent (MVI) 架构,他将其用作Cycle.js的基础。虽然 Angular 2 确实具有双向数据绑定的形式,但它并没有规定数据流架构。它的一个卖点是与模式无关,并且可以与 MVC 或 Flux 架构一起使用。因此,由开发人员选择合适的模式。>> 来源

0 投票
1 回答
139 浏览

typescript - 更新到 v2 ngrx/store 后的空白页面

从 v1更新到 v2(无中间件)到ngrx/store后,我的应用程序显示一个空白页面。我的ngrx/router也停止重定向页面(在v1中,如果我转到一个不存在的页面,它会重定向到一个现有的页面)。

没有警告和错误。

这是我的控制台,当我使用 v1 时:

在此处输入图像描述

这是 v2:

在此处输入图像描述

如果有帮助,这是我的代码部分:

父路由器:

什么可能导致空白页面而不是重定向?谢谢

0 投票
1 回答
1340 浏览

typescript - TypeError:返回未知类型

我正在使用ngrx/effects。我收到了这个错误:

原始异常:TypeError:返回未知类型

这是我的代码的一部分:


什么可能导致这种情况?谢谢

0 投票
1 回答
2407 浏览

angular - 大型项目列表的 Angular 2 性能优化

假设我有一个显示项目列表的组件

在模板中我们有

我想知道,当我们单击“加载更多”链接并从服务器获取新项目并附加到列表时,Angular 2 是重新绘制完整列表还是只是将新项目附加到 DOM 中?

如果它重新绘制完整列表,有没有办法只附加新添加的项目。ChangeDetectionStrategy.OnPush 在这种情况下是否有帮助?

在我的情况下,我最初显示 20 个项目,每次单击 load more 都会将 20 个项目附加到列表中。我希望当用户多次加载更多项目时,他们可能会在列表中列出 1000 到 2000 个项目。如果 Angular 在每次追加时重绘完整列表,可能会导致性能问题。

@ngrx/store 可以带来一些性能优势吗?

0 投票
2 回答
404 浏览

angular - 当 Http 完成以随后运行另一个函数时,Angular 2 发出

我有一个通用函数来对我的 API 进行 DELETE 调用。函数是这样的:

我从几个地方调用这个函数,发送不同的 url、项目和操作。假设我有一个这样的函数:

有时,我想在从 API 中删除项目后触发另一个操作。例如,也许我想检查我的全球书店是否发生了变化,现在我移除了书柜。

有没有一种简单的方法可以让我的deleteBookcase函数知道 HTTP 调用和后续操作在过早触发额外操作之前已经完成?

0 投票
1 回答
722 浏览

typescript - 当页面发生变化时,什么可以触发加载所有商店状态?

我正在使用ngrx/storengrx/effectsngrx/router

我的效果是这样的:

一开始,store状态是这样的:

1)运行后this.store.dispatch({ type: LOAD_ONE_PRODUCT });变成这样:

2)运行后this.store.dispatch({ type: LOAD_ONE_WORKER });变成这样:

3)接下来当我转到另一个页面时,

现在{{store|async|json}}显示:

我所有的状态都回到了初始状态。不仅products消失了,而且workers消失了。(注意:workers也消失了。)

(但是,在 Chrome 扩展 Redux 工具中,状态树始终显示正确。)

如果我添加一个按钮并手动使用 ChangeDetectorRef,dothis._cdRef.detectChanges();仍然{{store|async|json}}显示初始状态。(所以似乎与区域无关)

但是,如果我之后调度一些操作,两者products都会workers返回状态。并且也{{store|async|json}}正确显示。

由于在 Chrome 扩展 Redux 工具中,状态树始终显示正确。所以我猜它只是没有正确加载。我的问题是当页面发生变化时,什么会触发加载所有商店状态?谢谢

0 投票
2 回答
212 浏览

angular - 仅当订阅后出现新值时才获取该值

我正在使用 ngrx/商店。

.publish()我之前尝试添加.subscribe,但后来我无法获得任何价值。

name仅当订阅后出现新值时,我怎样才能获得?谢谢

0 投票
1 回答
1899 浏览

angular - 带有 ChangeDetectionStrategy.OnPush 和异步管道的 Angular 2 Observable 不起作用

我正在使用一个 observable 将一个列表从服务返回到我的组件,在我的组件中我使用 ChangeDetectionStrategy.OnPush 并且在模板中我使用异步管道,希望这会带来一些性能优势,因为不会一直执行更改检测但仅当有新内容可用时。

以下是我的服务:

在我的组件中,我有:

如果 loadList 内容通过 http 调用获取列表内容,则会更新视图,如果列表内容是静态的,则不会更新视图。

如果我将列表更新包装在 setTimeout 中,它会触发视图更新

我刚开始探索 Observables,谁能指导一下上面的代码有什么问题?