Question

这似乎是一个简单的用例，但我无法弄明白。我想显示通过HTTP从请求检索到远程API的项目列表。我希望屏幕在请求发生时最初显示为空白，然后在可用时填充结果。

所以我想我会有两个组成部分：愚蠢的＆＃34;项目列表＆＃34;组件和包装＆＃34;表示＆＃34;组件，呃，以某种方式启动远程请求，同时使用状态的空项目列表呈现哑组件。

我知道如何启动初始远程请求：使用componentDidMount()。

我知道如何处理调度/连接：我想使用类似的东西：

const OuterWrapper = connect(
   mapStateToProps,
   mapDispatchToProps
) (ItemList)

但我如何让这些东西一起玩？使用connect()似乎使事情遥不可及。我想以异步方式启动API请求，然后以某种方式执行`dispatch（updateItemList（items））来告诉全世界有新项目要添加到该状态。

修改

我找到react-lifecycle-component，但我不了解之前和之后的示例用法。在较长的情况下，为什么getAllTehDatas被引用两次？为什么mapDispatchToProps明显没有key:value对？如果componentDidMount()调用它，为什么需要它呢？如果该方法需要使用dispatch()？

，您会怎么做？

Answer 1

首先，关于您的编辑，该repo中的组件旨在让您将函数作为props传递给组件。只要React lifecycle methods运行，它们就会运行。这有用的原因。但是这些原因在回购中解释，与您的问题无关。

另外，你看到了这个：

const mapDispatchToProps = { getAllTehDatas };

这是ES6的简写符号。它只是意味着：

const mapDispatchToProps = { getAllTehDatas: getAllTehDatas };

即，属性的名称与变量的名称相同。因为这是一个如此常见的操作，有人聪明地想出了这个简写。如果您不了解它，可能会非常混乱。你应该阅读about es6。

冠。

有许多概念没有明确界定。愚蠢的组件。智能组件。容器组件。演示组件。连接组件。纯功能组件。这很重要。

容器组件是智能组件，而演示组件是哑组件。

有时愚蠢的组件有点聪明。也许他们有鼠标悬停的动画。他们甚至可以拥有州。

纯功能组件只是一个功能。所以没有方法也没有国家。这意味着只有道具。由于不存在状态或额外逻辑，纯粹的功能组件总是呈现的。

连接组件是高阶组件。这只是一个将组件呈现为子组件的父组件。它还有一点魔力来优化渲染。

演示组件应该只显示内容但不能显示内容。如果在单击或键入内容时完成了某些操作，则应由父级处理，父级可以将处理程序传递给演示组件。演示组件可以执行某些事物，但这些事情不得影响其他任何事物。

容器组件应该决定发生了什么。这就是逻辑被塞进去的地方。它更像是React概念，而不是Redux概念。

使用connect创建已连接的组件。当它被调用时，我们传递一些函数。 mapStateToProps和mapDispatchToProps。

mapStateToProps可以执行任何操作，为您的组件生成一些道具。这意味着您的组件可以使用这些道具而无需进一步处理数据。所有需要的处理都可以在mapStateToProps中完成。

mapDispatchToProps可以做任何事情来传递直接用作事件处理程序的函数。我们通常会传递绑定的动作创建者，它们通常已经完成了处理程序需要执行的所有操作。但是我们可以传递任何函数并赋予它任何名称。所以我们可以调用它onClick并传递我们喜欢的任何函数。您还可以在Redux-Thunk的帮助下创建复杂的动作创建器，以使任何事件处理程序成为智能操作创建者。 Thunked动作创建者可以访问调度和状态。

以上两段概述了一个有趣的观点：connect在我们mapStateToProps和mapDispatchToProps的帮助下创建的HOC可以轻松地制作成一个完整的智能组件，并且包裹组件可以完全呈现，即使最终的HOC要做聪明的东西。

或者得到：您可以connect已连接的组件。当然，心灵在吹。这样做有用吗？当然可能是。组件可能需要来自状态的一些通用数据，无论它在何处使用。你connect了那个数据。然后，生成的组件可以connect到特定于其他地方使用的地方的数据。共同？号有用吗？是的！

您还可以将表示组件包装在容器组件中，然后使用connect包装。这可能是您正在寻找的。然后，您可以使用componentDidMount在容器组件中进行提取。

但是，由于两个原因，演示组件只能与他们的智能分开：

复用性
可测

如果你不需要，那么你不应该将两者分开。为什么没有收获使事情变得复杂？

另外，请使用componentDidMount，而不是componentWillMount。如果使用通用组件，后者也在服务器端运行。您不希望在服务器上运行您的提取。

请注意，即使连接的组件显然是一个包装器，您也不应该这样想。可以把它想象成原版的插件版本。包装只是一个实现细节。此外，包装器由React-Redux创建和维护，其内容不会被弄乱。这意味着您无法更改包装器的componentDidMount或任何其他部分。当我说你不能，我的意思是你完全可以但不应该。

总结一下，我建议您了解React，Redux和React-Redux。他们在一起很顺利，但不是一回事。

掌握了概念之后，你就会做你认为最好的事情。制定自己的规则。

Answer 2

我之前提出的

This answer给出了一个如何正确使用connect并在组件中进行动作调用的示例。唯一的区别是它在componentWillMount中对我来说：P

如何将componentDidMount（）与react-redux connect（）混合使用？

2 个答案: