流量设计模式和良好实践

时间:2017-06-30 13:29:14

标签: reactjs design-patterns flux

这将是一篇冗长的帖子,包含我的问题,以及我最近使用 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。此用户菜单必须显示" Profile"和"退出",如果用户已登录,并且"登录","注册"。因此,我没有将两个函数和布尔值一直向下传递 - 而是在UserActions内使用UserStoreNavbarUserMenu。我知道这种用户身份验证方法不是很好,但这只是最简单的例子。

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

1)用户授权

基于限制的

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

2)自包含有状态组件

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

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

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

1 个答案:

答案 0 :(得分:1)

快速回答第1节1)

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

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

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

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

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