问题标签 [state-management]

Been playing around with adding state management to my application, and was hoping for a little clarification on best practices for organizing normalized data.

Based on the documentation in the Redux Docs a common pattern is to organize things like "authors" and "books" under "entities" inside your state.

However, most examples that I've come by doesn't fit this pattern. It seems as though a common practice is placing "authors" and "books" on their own inside the state rather than within "entities".

Just hoping to get some clarification on this, and an understanding of how to get "authors" and "books" within "entities" to fit the structure of the example docs.

自从我开始阅读 SPA 以来，最让我困惑的是如何处理应用程序状态。

尽管我在 Redux 中找到了我一直在寻找的大部分答案，但仍有几件事我不确定如何处理。

其中一件事是如何指定我想在我的应用程序中使用的“实体”的形状。在我过去使用过的其他框架中，我看到大量使用 ES2015 类来实现此目的，但在 React/Redux 应用程序中，对象字面量是迄今为止表达应用程序状态的首选方式。昨晚我在 redux 文档中阅读了有关规范化数据的内容，虽然它给了我关于如何处理深度嵌套对象的好主意，但它让我觉得缺少一些东西，那就是如何在一个单一的尽可能清楚地发现应用程序状态的结构/形状是什么。

以上述文章中使用的样本数据为例：

你会如何表达这些数据的形状？像这样？

也许：

好吧，这并没有告诉我每个对象内部的对象的实际形状，byId而这正是自从我开始研究一点 Redux 以来一直困扰我的问题。

所以问题是，有没有什么方法/惯例可以让我以最清晰的方式表达形状，特别是构成商店将要管理的状态的对象的每个属性？

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

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

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

当收藏中的项目（在我的例子中是笔记）可能与许多人相关时，如何做到这一点？

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

考虑：

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

替代方案：

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

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

我有几个状态实例，我需要支持复制某些状态片段的操作。例如，我的产品是一个调查生成器，所以当我复制一个问题时，我也想复制它的答案，而不是让多个问题指向相同的答案实例。

状态被标准化：

在调度 QUESTION_DUPLICATE 的操作时，我还想复制任何答案。目前，我的 QUESTION_DUPLICATE 操作创建者还创建了一个新答案键的映射列表，然后答案缩减器使用它。

这种模式对我来说似乎很笨拙，尤其是在考虑更深层次的重复的可能性时（例如，复制一个包含问题的页面，其中包含答案......）。是否有更好的模式来深度复制标准化数据？

我在我的主 app.js 文件中创建了一个源

我希望源在我的导航组件中可用。我得到一个未定义的错误。

我怎样才能让它工作。我必须作为道具通过吗？我虽然这将作为“来源”在全球范围内可用

我的组件是这样导入的，因为我正在使用 webpack

这是我从文档中的示例中可以看到的唯一区别。

我现在已经尝试了几种方法来管理组件的表单状态。

对于这个例子，我将使用一个自定义组件，它可以从下拉列表中选择一个用户，并使用一个按钮添加它们，然后在表格行中显示每个用户。每行都有一个 startDate 和 endDate 以及一个用于清除日期的复选框。然后，发送表单以供提交。

大致是这样的container：

方法一：

调度状态以存储以下单独的组件：

<user-selector>：

• SelectUser(user.id)
• AddUser(user.id)

每个 ngFor user-row：

• SetUserDate(user.id, dateType, date)
• SetUserDefault(user.id)

container：

• SaveUser(users)

现在我的状态总是同步的，我可以追溯任何以前的状态，并且可以使用 redux“时间旅行”来查看当我这样做时一切是否继续工作。

也许最混乱的是SetUserDate，因为它需要很多输入才能使其工作（dateType 是这样我不需要两个单独的操作） 其他的非常简单，reducers 确保数据被更新。最后，一个SaveUser接受当前users$状态并分派异步操作的操作。

方法二：

为每一行创建一个 formGroup：

ngFor现在只需要通过 some 's将其塑造成与示例类似的 html 。

在这里我遇到了一些问题：

• 设置复选框应直接将startDate&修改endDate为''。

我form.valueChanges.subscribe本可以在开始和结束时分别听取更改，或者 combineLatest 可能会起作用。然后要么修改generateGroups函数以适应这种变化，要么users直接更新对象并generateGroups再次运行，或者执行patchValue.

我要修改组件上的状态的一个问题是，您基本上是在修改/更新状态，并避免修改原始状态（除非users对象已经是克隆，通过使用new User()模型或只是用{ ...user }或类似方法克隆它。

• 添加用户

我可以做类似的事情：

以及用于删除用户的类似操作。但是在上面的示例中，我正在修改原始用户对象，如果该用户被绑定/引用到商店，那么这是有问题的，因此直接修改了商店。这将需要不同的解决方案：

那么return值也应该被处理，唯一明智的做法是不做后者，而是坚持前者，并确保this.users已经克隆了，避免改变状态。通过上述方法，哪里new Users(users)最有意义。

主要问题

我们最终要做的Approach 2就是做一个 reducer 做的事情，但是是在本地做的，并且没有任何事件/状态历史。

我想将所需的操作保持在最低限度，我对Approach 1. 这导致我采用第三种可能的方法：

方法 3

像第二种方法一样使用formGroups，然后用 听个别变化valueChanges，所以：

或者我可以订阅整个表单并找出发生了什么变化，以及何时以及如何采取何种行动（例如调度或patchValue）。（这听起来像是减速器的工作）

最后

考虑到这个表单至少有 4 种不同类型的类似表单的组件，在发送之前修改状态，这里最好做什么。

• 根本不使用任何 redux 操作，除非在做的时候SaveUser，这意味着我在表单的初始状态之间没有时间线，直到最后。
• 只使用 redux 意味着我必须做很多冗长的操作，并为每个操作制作 reducer。
• 像最后一种方法一样使用这两种方法意味着formControls尽可能多地管理状态，但必须订阅每个单独的用户项，或者，我可以收听整个表单，但必须使用匹配的FormGroup索引并制作它比必要的更复杂。

Upwork我在他们提到的地方看到了一篇工作帖子State management of screens。我第一次听说这件事。那是什么？你能告诉我如何用Ionic 3应用程序实现这样的事情吗？我需要使用任何库来实现这种模式吗？希望你能和我分享你对这种模式的经验。

您可以在 Upwork 上的 This job post 上查看上述要求。

我有一个带有 RecyleView 适配器的 viewpager 的 tablayout 设置。当用户单击列表项时，会打开新活动。按下后退按钮时，Recycleview 将重置为第一个选项卡和列表项。

如何存储单击列表项的主要活动状态？

我有一个来自 redux 的对象，带有我在反应原生类组件中渲染的照片。

每次我为不同的对象更新相关类组件的状态时，来自 redux 的对象的图像正在重新加载。

我怎么能避免呢？

我认为使用 redux 可以避免在状态更新时重新渲染对象。

我想通过单击删除链接从表中删除当前行。

我使用下面的代码来显示数据

服务

成分

html

我听说过拼接功能。但我找不到如何在 observable 中使用它的方法。