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

Question

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

我认为有些事情是真的:

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

应用程序的大部分内容都很重,并且有许多UI逻辑/状态正在进行,但不需要Redux中的任何状态.

我觉得随着组件级状态的自由使用,我应该使用更多的容器组件来组成更小的无状态组件.但是,我将容器组件的许多定义视为"连接到Redux的HOC"

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

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

Answer 1

一些想法。

首先，重要的是要理解“容器组件”只是其主要工作是从某处获取数据并将该数据传递给其子组件的任何组件。这可能意味着进行 AJAX 调用来检索数据，或访问 Flux 存储。这意味着 React-Reduxconnect函数生成的包装组件是“容器组件”，因为它们唯一的工作就是从 Redux 存储中提取数据。这也意味着负责管理 UI 状态的组件也是“容器组件”。请参阅Dan Abramov 关于容器和表示组件的原始文章。

其次，使用类组件和函数组件是非常有趣的，无论您想要多少，都可以。这完全取决于你。

第三，虽然您可以在一个文件中定义“普通”组件，然后在另一个文件中“连接”它们，但我个人倾向于认为这是不必要的分离。大多数时候，给定的 React 组件只会连接一次，因此在同一个文件中定义组件并连接它是完全合理的。

您可能需要阅读我的React/Redux 链接列表中有关Redux 架构和项目结构的一些文章以获取更多信息。