在不断变化中，为什么需要 Store？答案

【问题标题】：In flux, why Store is needed?在不断变化中，为什么需要 Store？
【发布时间】：2015-04-09 16:52:55
【问题描述】：

根据Flux ArchitectureView 使用Action 调用Dispatcher 更新Store，同时View 监听Store 变化事件。

我的问题是：我们为什么需要 Store？

为了列出所有用户，我的组件将调用 ListAllUsersAction，后者将依次调用我的 API 并使用 API 调用的结果更新 Store。然后 Store 发出 View 正在监听的 change 事件。但存储也存储结果。为什么？为什么需要这个中间层？无论如何我都不会直接调用 store，所以这个缓存层对我来说毫无意义，并且随着我生成更多加载更多数据的事件，最终我所有的 store 都将拥有我的应用程序的所有状态，因为flux架构没有说明清理 Stores .

我错过了什么吗？

【问题讨论】：

Flux Store 的目的是保存需要跨多个组件共享的数据。如果没有组件需要该数据，除了一个并且数据不会被转换 - 不需要存储。
好的，让我详细说明一下。假设 Posts 仅在一个组件中需要：PostList。根据您的回答，在这种情况下我不需要 PostStore。当我的 PostList 组件被加载时，它会调用 LoadAllPostsAction 但动作发出的是谁？组件无法侦听 Actions，因为流程随即中断。它应该是 Component -> Action -> Store -> Component 并且这会关闭单向数据流。我错了吗？
我刚刚遇到a discussion，这应该有助于澄清事情，主要是第 4 和第 5 个帖子。

标签： reactjs reactjs-flux

【解决方案1】：

Stores 负责应用程序的状态和逻辑，例如，假设您通过 ListAllUsersAction 获取所有用户，您会从 API 中获取一个数组

var users = [{firstName: 'LIMELIGHTS'}, {firstName: 'SKWEE357'}];

现在，用户名显然是大写的，因为您的 API 决定这是传递数据的方式。

这只是不行，所以你想修复它。仅使用 React 或仅使用 Action 您将把这段代码放在哪里，它在哪里有意义？在你看来，你的调度员还是你的行动？不，你绝对不想用这种类型的逻辑弄乱你的 React 组件。在 Dispatcher 或 Action 中进行这种数据操作也没有任何意义，它们毕竟只是通知应该发生的事情。

【讨论】：

好点，但这并不能回答以下问题：我访问了用户页面，名为 ListAllUsersAction 的 UserListComponent 填充了用户存储，该事件发出了用户列表组件订阅的事件。一切都好：现在商店有用户数据以及组件（数据重复？）。然后我导航到另一个启动类似流程的页面，然后是另一个页面，最终，由于存储从未被清除，客户端将拥有所有应用程序状态。谁负责打扫商店？
哦，还有一个问题：假设组件 A 和组件 B 监听用户存储更改，但组件 A 以小写字母列出用户，而 B 以大写字母列出它们。存储应该保存什么类型的数据？
这不是数据复制，因为组件没有管理自己的竞争数据副本，它只是从存储中提取它需要的数据。当用户导航到不同的页面时，您可以选择保留以前的数据（也许他们会返回并期望它仍然存在），或者您可以在componentWillUnmount 中触发操作以将其设置为空。应在视图中建立大写与小写等显示细节，文本可以随心所欲地存储。
亚当，是的。组件状态反映了商店在某个时间点的状态。更新存储后，组件状态也会更新。如果我在卸载时清理存储，我可能会破坏应用程序的状态，因为其他组件可能仍需要存储中的数据。在我看来，Flux 是一个很好的架构，适用于简单的、类似演示的应用程序，其中有一个商店（例如 todo 应用程序示例），但对于真正的复杂应用程序来说，它的扩展性不够好。
@skwee357 当然是数据复制，只要有人知道其他数据，它就是数据复制，但不是组件克隆数据的意义上。如果你卸载了一个 store，你应该总是卸载监听那个 store 的组件，这是不言而喻的。此外，从商店传下来的数据是在 props 中而不是在 state 中。 React 和 Flux 对于真正的复杂应用程序来说绝对是成熟的，（我们在其上构建了我们的产品）。

【解决方案2】：

Flux 的目标是让数据流易于理解，即使应用程序变得庞大而复杂，这样新人可以快速上手，通过检查源代码了解发生了什么，并充满信心他们可以在不破坏事物的情况下进行更改。模块化和关注点分离是其中的重要组成部分。 Stores 是一种保持数据模型独立于视图层细节并为应用程序状态建立单一事实来源的方法。您可以查看任何 Store 的代码并查看它包含哪些数据，它响应哪些操作，它对其他 Store 中的数据有哪些依赖关系。为了开发人员的利益，这是一个组织问题，代价是代码稍微不那么紧凑。

为了列出所有用户，我的组件将调用 ListAllUsersAction 这将依次调用我的 API 并使用 API 调用的结果。

由于Actions的功能主要是为store提供更新的数据，你也可以先调用API，然后创建一个Action来处理结果。

随着我生成更多加载更多数据的事件，最终我的所有商店将拥有我的应用程序的所有状态，因为通量建筑没有提到清理商店。

保持应用程序的当前状态是商店的预期功能。如果用户操作或 API 调用导致数据更改，则操作会通知 Store 和负责保持该数据相应更新的 Store（甚至可能被重置为 null）。不需要任何其他类型的清洁，因为商店“拥有所有状态”正是他们应该做的。

【讨论】：

我已经为这个问题创建了一个聊天室。如果你能加入chat.stackoverflow.com/rooms/70619/…，我会很高兴