如何将componentDidMount()与react-redux connect()结合使用？

14 浏览
0 Comments

如何将componentDidMount()与react-redux connect()结合使用？

这似乎是一个简单的用例，但我搞不明白。我想要显示从远程API通过HTTP请求获取的项目列表。在请求进行时，我希望屏幕一开始是空白的，然后在结果可用时填充内容。

所以我认为我需要有两个组件：一个是简单的“项目列表”组件，另一个是包装的“展示”组件，通过在呈现空项目列表的同时发起远程请求。

我知道如何发起初始的远程请求：使用componentDidMount()。

并且我知道如何处理dispatch / connection：我想使用类似以下的代码：

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

但是我如何让这些东西一起工作呢？使用connect()似乎使得这些东西无法访问。我想要异步地发起API请求，然后以某种方式执行`dispatch(updateItemList(items))`来告诉世界有新的项目要添加到状态中。

编辑：

我找到了react-lifecycle-component，但是我不明白示例的使用方法，无论是之前还是之后的。在较长的例子中，为什么getAllTehDatas被引用了两次？为什么它在mapDispatchToProps中明确地没有key:value对？如果componentDidMount()调用它，为什么还需要在这里？如果该方法需要使用dispatch()，该怎么办？

0