问题标签 [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.
angular - 当路由激活时调度一个动作
我有几个路由,每个路由都有一个应该从服务器加载数据的表。当带有表的路由变为活动状态时,如何向 ngrx/store 发送操作以从服务器加载数据?
谢谢
angular - Angular2 - 在减速器之间共享动作是一个坏主意吗?
我们在 Angular 2 应用程序中使用 ngrx / store。我们的 store 是由 Reducers 组合而成的"cameraReducer", "subjectReducer"
……我们希望维护一些全局和通用(跨不同功能)项目,例如"appReducer"
.
{type:LOADING_*, payload}
在这样的场景中,共享一个像between individualReducers
and之类的动作有意义appReducer
吗?这应该在一个功能(可以被认为是一个单一的数据操作[使用单个 Reducer 和单个操作] 或多个相关数据操作 [使用多个 reducer 和多个操作])启动和关闭时打开一旦完成。appReducer 可能如下所示:
Adv - 没有样板。缺点 - 减速器的顺序将在指示器何时打开/关闭方面发挥作用。
或者
我们可以在调用每个功能的开头/结尾处编写代码
Adv - 指示器弹出/关闭的受控顺序。缺点 - 用于打开/关闭加载的样板代码。
或者
我们可以尝试将“loading”计算为组合的 observables(每个 reducer 都有自己的本地“loading”属性和该属性的 Observable)。
Adv - No Boilerplate 和 Controlled Order on 指示器开/关。缺点 - 增加的复杂性和更多的代码可能是。
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 架构一起使用。因此,由开发人员选择合适的模式。>> 来源
typescript - TypeError:返回未知类型
我正在使用ngrx/effects。我收到了这个错误:
原始异常:TypeError:返回未知类型
这是我的代码的一部分:
什么可能导致这种情况?谢谢
angular - 大型项目列表的 Angular 2 性能优化
假设我有一个显示项目列表的组件
在模板中我们有
我想知道,当我们单击“加载更多”链接并从服务器获取新项目并附加到列表时,Angular 2 是重新绘制完整列表还是只是将新项目附加到 DOM 中?
如果它重新绘制完整列表,有没有办法只附加新添加的项目。ChangeDetectionStrategy.OnPush 在这种情况下是否有帮助?
在我的情况下,我最初显示 20 个项目,每次单击 load more 都会将 20 个项目附加到列表中。我希望当用户多次加载更多项目时,他们可能会在列表中列出 1000 到 2000 个项目。如果 Angular 在每次追加时重绘完整列表,可能会导致性能问题。
@ngrx/store 可以带来一些性能优势吗?
angular - 当 Http 完成以随后运行另一个函数时,Angular 2 发出
我有一个通用函数来对我的 API 进行 DELETE 调用。函数是这样的:
我从几个地方调用这个函数,发送不同的 url、项目和操作。假设我有一个这样的函数:
有时,我想在从 API 中删除项目后触发另一个操作。例如,也许我想检查我的全球书店是否发生了变化,现在我移除了书柜。
有没有一种简单的方法可以让我的deleteBookcase
函数知道 HTTP 调用和后续操作在过早触发额外操作之前已经完成?
typescript - 当页面发生变化时,什么可以触发加载所有商店状态?
我正在使用ngrx/store、ngrx/effects和ngrx/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 工具中,状态树始终显示正确。所以我猜它只是没有正确加载。我的问题是当页面发生变化时,什么会触发加载所有商店状态?谢谢
angular - 仅当订阅后出现新值时才获取该值
我正在使用 ngrx/商店。
.publish()
我之前尝试添加.subscribe
,但后来我无法获得任何价值。
name
仅当订阅后出现新值时,我怎样才能获得?谢谢
angular - 带有 ChangeDetectionStrategy.OnPush 和异步管道的 Angular 2 Observable 不起作用
我正在使用一个 observable 将一个列表从服务返回到我的组件,在我的组件中我使用 ChangeDetectionStrategy.OnPush 并且在模板中我使用异步管道,希望这会带来一些性能优势,因为不会一直执行更改检测但仅当有新内容可用时。
以下是我的服务:
在我的组件中,我有:
如果 loadList 内容通过 http 调用获取列表内容,则会更新视图,如果列表内容是静态的,则不会更新视图。
如果我将列表更新包装在 setTimeout 中,它会触发视图更新
我刚开始探索 Observables,谁能指导一下上面的代码有什么问题?