问题标签 [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 投票
0 回答
641 浏览

angular - 带有重新选择的 ngrx/store 选择器模式

我将在ngrx 示例应用程序中实现的减速器的当前样式与以前的样式进行比较,以便找出大型应用程序的每种方法的优缺点。

现在编码为:

以前会写得很像:

虽然我确实喜欢使用reselect启用的当前简洁模式,但我必须说旧模式对我很有吸引力,因为我可以清楚地看到预期输出的数据类型。

由于它是一个 Observable 流,它还允许进行某些初步操作,例如过滤:

OTOH,在一个快速增长的应用程序中,旧模式变得难以管理,代码量迅速爆发。

我想知道是否有一种中间模式可以充分利用这两个世界?

0 投票
1 回答
100 浏览

ngrx - 为什么在这个@ngrx 效果示例中需要收集缩减器?

@ngrx 效果示例中使用了四个化简器,即 (1) 书籍 (2) 集合 (3) 布局和 (4) 搜索。我不明白为什么collection这里需要减速器,因为books减速器已经反映了addorremove操作后集合的状态。我只看到使用collection减速器来跟踪loadingloaded状态。

查看正在创建的书籍的最终状态getBookCollection。在getBookEntities任何添加或删除后反映集合的状态,因此不必与collection减速器组合。

我在这里错过任何逻辑吗?

0 投票
2 回答
4062 浏览

ngrx - 为什么在此 @ngrx 示例中需要重新选择 createSelector?

下面的代码片段有什么作用?它取自这个文件

export const getCollectionLoading = createSelector(getCollectionState, fromCollection.getLoading);

fromCollection.getLoading只有一个truefalse值,所以可以通过使用来实现任何优化createSelector吗?

0 投票
1 回答
944 浏览

angular - 在模型中加载数据的最佳方法,Angular 2

以下是关于我的项目的一些信息:

  1. 我正在获取帖子数据用户@ngrx商店和效果。
  2. 帖子模型有userId
  3. 当我渲染帖子时,我不想显示post.datapost.user.name

有没有办法通过帖子急切加载用户数据?

这个问题的最佳解决方案是什么?


post.model看起来是这样的:

我没有得到带有帖子项目的整个用户对象。我只得到用户ID。


编辑:这就是我获取和呈现帖子的方式:

后期效果.ts

post.component.ts

post.component.html


编辑2:发布reducer文件内容

post.reducer.ts

0 投票
1 回答
82 浏览

ngrx - 如何在不重新选择库的情况下从 ngrx 商店获取状态?

在本例中,如何在不使用and store.select方法的情况下从ngrx 存储中获取状态?reselect createSelector

export const getBookCollection = createSelector(getBookEntities, getCollectionBookIds, (entities, ids) => { return ids.map(id => entities[id]); });

constructor(store: Store<fromRoot.State>) { this.books$ = store.select(fromRoot.getBookCollection); }

0 投票
1 回答
36 浏览

angular - redux flat-data 会缓存不需要的数据吗?

想象一下,我有一个 AngularX 单页应用程序,其 UI 完全由嵌入式小部件组成,因此由于整个显示刷新,我可以在其中清除商店状态的路径更改。

使用我看到推荐用于 redux 的规范化数据方法,我可以看到我的商店状态变得越来越满,其中包含用户可能在一天中的剩余时间不会再次使用的数据。例如,滚动浏览数月的场地+活动将在本地存储许多场地详细信息和许多很可能不会再次使用的活动详细信息。

日历小部件显然无法从商店中删除项目,因为它移动到不同的月份,因为同一页面上的其他小部件可能依赖于一些相同的数据(场地详细信息、即将发生的事件等)

我担心 redux 会有效地鼓励开发人员保留数据,以防万一它在其他地方使用。

有人对此有解决方案吗?

0 投票
2 回答
3617 浏览

angular - 取消 ngrx 效果中的计时器

我有一个微调器,我希望微调器在显示之前等待 x 秒。但是,如果在微调器等待超时完成期间调用 REQUEST_DEACTIVATE_SPINNER,它应该停止触发 ACTIVATE_SPINNER 操作。又名我想取消活动计时器。这就是我到目前为止所拥有的。

有没有可能向我们展示如何取消正在返回到效果的计时器。

0 投票
1 回答
30 浏览

ngrx - NGRX 中的多参考注释

我有一个应用程序,其中包含人员和有关他们的注释。注释是这样的,它们可以与许多人相关(例如,注释 1 将出现在人员 1 和人员 3 上)。

我正在使用 NGRX 将我的状态保存在内存中。

现在查看 ngrx 示例应用程序,您可以获得一个很好的书籍集合示例。在那里,他们使用一个状态来保存由 bookId 索引的对象数组(用于快速检索)。

当收藏中的项目(在我的例子中是笔记)可能与许多人相关时,如何做到这一点?

我首先使用人员的 uid 对对象数组进行索引:

考虑:

  • 随着时间的推移会有很多笔记,因此状态数据可能会相当大
  • 为每个被引用的人创建一个笔记对象似乎是一个相当糟糕的主意(数据冗余)
  • 笔记会经常被添加/编辑/删除,所以需要最新的数据
  • 以后会涉及到离线db
  • 将整个笔记存储在状态中需要为每个访问的人员页面提供一些 .filter() 函数。随着状态的增长,这可能会变得缓慢:

替代方案

  • 每次您需要与人相关的笔记时,都不要通过调用 api 来将笔记存储在 state 中

有什么建议么?替代方案感觉很奇怪,因为当一半状态不在redux中时,为什么还要使用ngrx呢?

0 投票
1 回答
298 浏览

angular - ngrx 在网格中突出显示新添加的项目

我正在使用 ngrx(redux) 并且我有一个显示的项目列表(虚拟滚动)。单击工具栏添加按钮时,我会调度添加操作,reducer 会向列表中添加一个对象并返回新状态。

如何突出显示新创建的行?

我应该保持一个新属性的状态,该属性的 ID 是新创建的记录吗?我可能还必须在视图中滚动新创建的项目。因为随着列表的虚拟滚动,如果用户滚动列表,组件可能会被破坏并重新创建。

0 投票
1 回答
12421 浏览

javascript - ngRx 状态更新和效果执行顺序

我对这个问题有自己的看法,但最好仔细检查并确定。感谢您的关注并尝试提供帮助。这里是:

想象一下,我们正在调度一个动作,该动作触发了一些状态变化,并且还附加了一些效果。所以我们的代码必须做两件事——改变状态和做一些副作用。但是这些任务的顺序是什么?我们是否同步进行?我相信首先,我们改变状态然后做副作用,但是有没有可能,这两个任务之间可能会发生其他事情?像这样:我们改变状态,然后得到一些我们之前做的 HTTP 请求的响应并处理它,然后做副作用。

[编辑:] 我决定在这里添加一些代码。我也简化了很多。

状态:

行动:

减速器:

影响:

这就是我们调度 FetchItemAction 的方式:

期望的场景:

糟糕的场景:

所以问题很简单,糟糕的情况是否真的会发生?