javascript - 容器组件是否应该*始终*连接​​到 Redux?

标签 javascript reactjs redux react-redux

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

有些事情我认为是真的:

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

应用程序的很大一部分是 UI 繁重的,并且有很多 UI 逻辑/状态正在进行,但不需要来自 Redux 的任何状态。

我觉得随着组件级状态的自由使用,我应该使用更多的容器组件来组合更小的无状态组件。然而,我看到很多容器组件的定义是“连接到 Redux 的 HOC”

拥有一个包含许多容器组件的项目是否有意义,其中一些容器组件与 Redux 连接并将数据从商店传递到其相应的展示组件,而另一些未连接 Redux 但仅用于组合更小的组件并管理本地状态?

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

最佳答案

一些想法。

首先,重要的是要了解“容器组件”只是其主要工作是从某处 获取数据并将该数据传递给其子组件的任何组件。这可能意味着进行 AJAX 调用以检索数据或访问 Flux 存储。这意味着由 React-Redux 的 connect 函数生成的包装器组件“容器组件”,因为它们唯一的工作就是从 Redux 存储中提取数据。这也意味着负责管理 UI 状态的组件也是“容器组件”。参见 Dan Abramov's original article on container and presentational components .

其次,使用类组件和函数式组件完全是一件很有趣的事情,您可以随心所欲地使用它们。这完全取决于您。

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

您可能想阅读 Redux Architecture 上的一些文章和 Project Structure在我的 React/Redux links list获取更多信息。

关于javascript - 容器组件是否应该*始终*连接​​到 Redux?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43890279/

相关文章:

javascript - 在react-redux应用程序中处理 promise 链中的错误

JavaScript promise : can a parameter passed to fulfill go out of scope?

javascript - React - callbackFromApp 函数仅在 onClick 上运行一次

reactjs - 处理 axios React-Redux 应用程序中的 401 未经授权错误

javascript - 如何确定组件是否包含 React 层次结构

javascript - 如何从 Ant design 的 Select/Option 组件中获取值

javascript - handleActions() 中括号 [] 的用途是什么?

javascript - 当写入文件代码被注释时,附加生成器中的构建失败

javascript - 将焦点设置到下一个输入元素

javascript - 如何检测 React 中的 Esc 键按下以及如何处理