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

Question

这看起来像一个简单的用例,但我无法弄清楚.我想显示通过HTTP从请求检索到远程API的项目列表.我希望屏幕在请求发生时最初显示为空白,然后在可用时填充结果.

所以我想我会有两个组件:哑的"项目列表"组件和一个包装"表示"组件,呃以某种方式启动远程请求,同时使用状态的空项目列表呈现哑组件.

我知道如何启动初始远程请求:使用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生命周期方法,它们就会运行.这有用的原因.但这些原因在回购中解释,与您的问题无关.

另外,你看到了这个:

const mapDispatchToProps = { getAllTehDatas };

这是ES6的简写符号.它只是意味着:

const mapDispatchToProps = { getAllTehDatas: getAllTehDatas };

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

向前.

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

容器组件是智能组件,而表示组件是哑组件.

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

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

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

演示组件应该只显示内容但不能显示内容.如果在单击或键入内容时完成了某些操作,则应由父级处理,父级可以将处理程序传递给演示组件.演示组件可以做一些事情,但这些事情不能影响他们之外的任何事情.

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

创建连接组件connect.当调用它时,我们传递一些函数.mapStateToProps和mapDispatchToProps.

mapStateToProps可以做任何需要生成一些道具供你的组件使用.这意味着您的组件可以使用这些道具而无需进一步处理数据.所有需要的处理都可以在mapStateToProps.

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

上述2段概括了一个有趣的问题:通过创建HOC connect与我们的帮助mapStateToProps和mapDispatchToProps可以很容易地制作成一个完整的智能组件和组件包可以完全表象,即使最终HOC是做聪明的东西.

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

您还可以将表示组件包装在容器组件中,然后将其包装connect.这可能就是你要找的东西.然后,您可以使用componentDidMount容器组件中的提取.

但是,由于以下两个原因,表示组件只能与智能组件分开:

• 可重用性
• 可测性

如果你不需要,那么你不应该将两者分开.为什么没有收获使事情复杂化？

另外,使用componentDidMount,而不是componentWillMount.如果使用通用组件,后者也在服务器端运行.您不希望在服务器上运行fetch.

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

回顾一下,我建议了解React,Redux和React-Redux.他们一起顺利,但不是一回事.

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