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

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

所以我想我会有两个组件：哑的“项目列表”组件和一个包装器“呈现”组件，它在呈现哑组件时，以某种方式启动远程请求，同时从状态中呈现空的项目列表

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

componentDidMount（）

我知道如何处理分派/连接：我想使用以下方法：

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

但是我如何让这些东西一起玩呢？使用

connect（）。我想异步启动API请求，然后以某种方式执行`分派（updateItemList（items）），告诉世界有新的项要添加到状态

编辑：

我发现了，但我不理解示例用法，包括之前和之后。在较长的情况下，
getAllTehDatas
为什么被引用两次？为什么它在
mapDispatchToProps
中没有
key:value
对？如果
componentDidMount（）
调用它，为什么需要它呢？如果该方法需要使用
dispatch（）
，您会怎么做？
我不久前做过一个例子，告诉您如何正确使用connect并在组件中进行操作调用。唯一的区别是它在componentWillMount中为我：P
首先，关于您的编辑，该repo中的组件旨在让您将函数作为道具传递给该组件。无论何时运行，这些都将运行。这是有用的原因。但回购协议中解释了这些原因，与您的问题无关
你也看到了：

const mapDispatchToProps = { getAllTehDatas };

这是ES6速记符号。它只是意味着：

const mapDispatchToProps = { getAllTehDatas: getAllTehDatas };

也就是说，属性的名称与变量的名称相同。因为这是一个非常普通的操作，所以有个聪明的人想出了这个速记法。如果你不知道的话，可能会很困惑。你应该读书

向前

有许多概念没有明确界定。哑组件。智能组件。容器组件。表象成分。连接的组件。纯功能组件。很多

容器组件是智能组件，表示组件是哑组件

有时哑组件有点智能。也许他们在鼠标上方有一个动画。他们甚至可以拥有国家

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

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

呈现组件应该只显示内容，而不执行内容。如果在单击或键入内容时完成了这些操作，则应由父级处理，父级可以将处理程序传递给presentational组件。表象成分可以做一些事情，但这些事情不能影响它们之外的任何东西

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

连接的组件是使用
connect
创建的。调用时，我们传递一些函数
MapStateTrops
和
mapDispatchToProps

MapStateTrops
可以做任何需要的事情来生成一些道具供组件使用。这意味着您的组件可以使用这些道具，而无需进一步处理数据。所有需要的处理都可以在
MapStateTops
中完成

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

以上两段概述了一个有趣的观点：由
connect
在我们的
mapstatetrops
和
mapsDispatchtorops
的帮助下创建的HOC可以很容易地制作成一个完整的智能组件，并且封装的组件可以完全呈现，即使生成的HOC是做智能的东西

或者，你可以连接一个已经连接的组件。当然，令人兴奋。这样做有用吗？当然有可能。一个组件在任何地方使用时都可能需要一些来自state的常规数据。您可以
将它连接到该数据。然后，可以将生成的组件
连接到它在其他地方使用的特定位置的数据。普通的？不，有用吗？对!

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

但是，仅出于两个原因，表象组件才有效地与其smarts分离：


可重用性
可测试性

如果两者都不需要，那么就不应该将两者分开。为什么把事情复杂化而没有收获

另外，使用
componentDidMount
，而不是
componentWillMount
。后者也在服务器端运行