流量设计模式和良好实践

Question

这将是一篇冗长的帖子，包含我的问题，以及我最近使用 Alt 实施创建的第一个 Flux 项目的示例作为后盾。我将它分成两部分，并尝试计算我的问题，以便更容易回答。如果您知道我可以阅读有关该主题的好地方 - 请分享。我已经完成了我的阅读，但我发现找一般的信息有点困难。最佳做法。我们走了。

第1节：一般性问题

1）每个视图组件多个商店

单个容器（或高阶组件）依赖多个商店是一种好习惯。这可能会在组件的状态中导致许多未使用的属性。那是问题吗？如果是的话，我可以得到这样的状态：

//constructor
this.state = { 
    field1: // from Store1
    field2: // from Store2
}

//componentDidMount
Store1.listen(this.updateFromStore1)
Store2.listen(this.updateFromStore2)

//updateFromStore1
this.setState({
    field1: state.field1
});

我认为这种方法可以很好地分隔商店中的数据 - UserStore 只会保存有关用户的信息， {data}商店只会保存有关其数据类型的信息。每个组件都可以从所有商店中获取所需的任何内容。或者更像是 - 每个容器都有自己的商店，这会导致数据重复，但项目更清晰。

2）对多个组件使用单个商店

例如 - FormStore ，负责保存有关应用程序中每个表单的信息。我们表单的所有字段都保存在那里，只有当前挂载的组件（例如 UserRegister ）的字段才会被初始化和使用。这可能会导致很多未使用的字段，状态中的空值，但如果我们只选择我们正在使用的字段，我们可以再次阻止，如上所述。

3）加载初始数据应该负责什么？

我设计的应用程序是这样一种方式：当一个组件安装时，它会激活操作方法，该方法调用服务器获取数据，然后触发成功 失败操作，它会更新商店。但我在某处读到商店可以在内部获取初始数据，然后操作将仅用于更改数据。如果商店要对此负责，何时以及如何运作？

4）操作的概念：

行动是否应该驱动一切，或者只有在我们更新数据时才需要它们。例如，我尝试在操作中重定向，并且出现同步操作错误，因为我重定向到的组件触发了componentDidMount内的操作以获取更多数据。如果商店在内部处理初始数据，这可能不会成为问题。

5）使用操作和商店，减少传递大量道具：

例如，我的用户逻辑（登录，注销）由App 容器组件处理。在App下，我有Navbar，然后是NavbarUserMenu。此用户菜单必须显示＆＃34; Profile＆＃34;和＆＃34;退出＆＃34;，如果用户已登录，并且＆＃34;登录＆＃34;，＆＃34;注册＆＃34;。因此，我没有将两个函数和布尔值一直向下传递 - 而是在UserActions内使用UserStore和NavbarUserMenu。我知道这种用户身份验证方法不是很好，但这只是最简单的例子。

第2部分：我在最近的应用程序中遇到的问题

1）用户授权

基于限制的

网址很容易。我在容器之上使用了另一个 HOC ，如果没有登录用户，则会收听 UserStore 并重定向到“登录”页面。但是，如何在组件链中隐藏按钮？我使用了相同的方法（但不是重定向，我只是没有渲染按钮）。但是，这种违反 Flux 的规则，所有操作和商店应该由<仅限strong>容器组件。有没有更好的方法。

2）自包含有状态组件

Flux 文档说最好的情况是所有视图组件都是无状态。但是如果我有一个可扩展视图组件呢？例如，我有一个框，带有Book摘要和Read more按钮。按下按钮时，框会展开，并显示其他信息。我的解决方案是在组件内部保持一个自包含的状态，该组件包含特定于组件的信息。从逻辑上讲，我不认为商店有任何意义，因为商店没有实际数据。有什么想法吗？

3）在组件链中更低的表单

这可能类似于2），但我认为形式有点不同。例如，我有电影列表，每部电影都可以点击＆＃34;评论＆＃34;按钮，将显示评论和表单，以添加新评论。如何处理该表格？自足的逻辑和状态？我所做的是将评论字段添加到我的 FormStore ，并重复使用它和 FormActions （相同的操作和商店我在我的应用中使用的每个商店都有。）

Answer 1

快速回答第1节1）

我不知道您正在使用哪种焊接实现，但是拥有不同的存储（比如userstore和datastore）与拥有以下根结构的一个存储没有太大的不同：{user：...，data：... }

只要您可以注册到商店中的特定对象，它的行为就会一样。

这个问题反而围绕着我的信息的生命周期有什么不同。

例如，我通常会在本地存储中存储一些信息（例如＆＃39;用户名＆＃39;）。为了简化我将本地存储的所有数据收集到一个特定的商店中，该商店将自行序列化并最初重新加载。

我没有看到每个组件有1个存储点，如果数据只是内部的，那么使用状态就足够了。