如何使用商店在Flux / ReactJS应用程序中管理状态？

Question

在FLUX / ReactJS架构中，我很好奇以下方法是否违反（或不建议）FLUX流程。

1）我们有2家商店。商店A＆amp;商店B。

2）我们有一个＆＃34; App＆＃34;其状态从存储A设置并将其传递给组件1和组件2的组件。

3）组件1使用收到的数据＆＃34; this.props＆＃34;并提供东西。

4）组件2使用来自收到的＆＃34; this.props＆＃34;但也有自己的基于商店B的状态（同样的方式＆＃34;应用程序组件＆＃34;有其状态）。

根据我的理解 - 理想情况下 - 我会制作应用程序组件＆＃34;聆听商店A＆amp;存储B并将所有内容传递给其他组件。

然而，在现实生活中，您可以说100个商店，每个商店都有自己的条件（如果某个数据组合，您可以说组件2不会被渲染不符合，等）。这将使App Component成为一个类似GOD的组件，处理如此多的东西。在我看来是不切实际的。

在我看来，即使您没有顶级组件管理所有状态并将其传递给组件，您仍然可以获得单向数据流 - 因为状态仍由商店决定，不是由组件本身（并且您通过Actions-＆gt; Dispatcher-＆gt; Store触发事件）。如果您想在组件中封装某个行为，那么这在我看来特别好。

想象一下以下场景：

AppComponent - ＆gt; AuthComponent - ＆gt; LoginFormComponent

AppComponent - ＆gt; ListItemsComponent - ＆gt; SingleItemComponent

如果AppComponent知道＆＃34; AuthStore＆＃34;那就不奇怪了。状态，只是因为它可以通过道具传递给AuthComponent？ 如果AppComponent什么都不知道（在这个例子中）并且只是渲染了2个孩子，那会不会更好; AuthComponent将监听AuthStore并将信息传递给 登录表格; ListItemsComponent将侦听ListItemsStore并将所需信息传递给SIngleItemComponent等。

你们采取哪种方式？

Answer 1

理论上如果您的较低级别组件是完全隔离的，并且有0％的可能性，根据其状态，您需要更改更高级别（或相同级别）组件的状态，那么管理没有任何问题它在组件本身中的状态。

然而有缺点：

1. 如果以后你决定使用更高的组件状态 你需要重构的层次结构。
2. 它减少了组件 可重复使用的。你需要有相同的商店，相同的行动等。而如果你通过道具收到状态，你可以更容易地将它插入其他项目。
3. 这使得测试更加困难。

我想说如果它是一个大的独立组件，有许多较低的组件，那么保持状态在其中是有意义的，但通常在应用程序中只有一个这样的组件。如果它更像是一个小的，一个目的的组件，那就没有意义了。