容器组件*总是*连接到Redux吗？

Question

我即将开始一个新的React项目，并试图利用我以前的学习来创建一些关于我如何构建应用程序的规则。

我认为有些事情是真的：

1. Redux拥有＆＃39;主要＆＃39;整个申请的数据
2. 如果需要在整个应用程序中共享，Redux可以保持UI状态（例如，可以从任何地方启动的全局模式窗口）
3. 如果该状态不需要在应用中的任何其他位置共享，则组件可以使用setState保持自己的状态。
4. 应尽可能使用无状态组件
5. 当我创建一个需要Redux状态的组件时，我将创建FooContainer.js和FooComponent.js个文件 - Redux连接代码将位于容器中。

应用程序的大部分内容都很重，并且有很多UI逻辑/状态，但不需要Redux中的任何状态。

我觉得随着组件级状态的自由使用，我应该使用更多的容器组件来组成更小的无状态组件。但是，我看到很多容器组件的定义为＆＃34;连接到Redux的HOC＆＃34;

拥有一个包含许多容器组件的项目是有意义的，其中一些是Redux连接并将数据从商店传递到相应的表示组件，而另一些则不是Redux连接但仅用于撰写较小的组件和管理本地状态？

如果是，是否有任何推荐的文件结构，命名约定等来区分这两者？

Answer 1

一些想法。

首先，理解一个容器组件＆＃34;只是任何组件，其主要工作是从某处获取数据并将该数据传递给其子级。这可能意味着进行AJAX调用以检索数据或访问Flux存储。这意味着React-Redux的connect函数生成的包装器组件是＆＃34;容器组件＆＃34;，因为它们唯一的工作是从Redux中提取数据商店。这也意味着其工作是管理UI状态的组件也是 ＆＃34;容器组件＆＃34;。请参阅Dan Abramov's original article on container and presentational components。

其次，使用类组件和功能组件非常有趣，尽可能多或少。这纯粹取决于你。

第三，当你可以定义你的＆＃34;普通＆＃34;一个文件中的组件，以及＆＃34; connect＆＃34;他们在另一个文件中，我个人倾向于认为这是不必要的分离。大多数情况下，给定的React组件只会连接一次，因此定义组件和将它连接到同一个文件中是完全合理的。

您可能需要阅读Redux Architecture中Project Structure和React/Redux links list上的一些文章，了解更多信息。

Answer 2

修改你的假设：

• Redux在商店中保存整个应用程序的“完整数据”。
• 如果需要在商店中的应用程序之间共享，Redux可以保持UI状态。
• 组件不保持自己的状态，它们引用主存储（甚至间接使用连接）
• 应尽可能使用无状态组件。状态由容器传递。
• 在创建需要Redux状态的组件时，我将创建FooContainer.js和FooComponent.js文件 - Redux连接代码将位于容器中。

回答你的问题：

  

拥有一个包含许多容器的项目是否有意义   组件，其中一些是Redux连接并从中传递数据   存储到相应的表示组件

是的 - 将应用程序分成较小的组件与自己的容器是很好的做法。

  

和其他不是Redux连接但仅用于编写的   较小的组件和管理本地状态？

不是真的IMO - 在Redux中，应用程序的状态应该只保存在一个独特的商店中。如果相关的话，你仍然可以在容器中放置更小的简单组件。