你如何将 componentDidMount() 与 react-redux connect() 混合? [英] How do you mix componentDidMount() with react-redux connect()?

问题描述

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

This seems like a simple use case but I can't figure it out. I want to display a list of items retrieved from a request to a remote API over HTTP. I would like the screen to show blank initially while the request is taking place, and then get populated with the results when available.

所以我想我会有两个组件:愚蠢的项目列表"组件和一个包装器展示"组件，呃，在渲染带有空项目列表的哑组件时，以某种方式启动远程请求状态.

So I thought I would have two components: the dumb "item list" component, and a wrapper "presentational" component that uh, somehow kicks off the remote request while rendering the dumb component with the empty item list from state.

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

I know how to kick off an initial remote request: use componentDidMount().

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

and I know how to handle dispatch / connection: I want to use something like:

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

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

but how do I get these things to play together? using connect() seems to put things out of reach. I want to asynchronously kick off the API request, and then somehow do a `dispatch(updateItemList(items)) to tell the world that there are new items to be added to the state.

我找到了 react-lifecycle-component，但我不明白这个例子使用之前和之后.在较长的情况下，为什么 getAllTehDatas 被引用两次?为什么它在 mapDispatchToProps 中没有 key:value 对?如果 componentDidMount() 调用它，为什么在那里需要它?如果该方法需要使用 dispatch()，你会怎么做?

I found react-lifecycle-component, but I don't understand the example usage, both before and after. In the longer case why is getAllTehDatas referenced twice? Why is it in mapDispatchToProps plainly without a key:value pair? Why is it needed in there at all if componentDidMount() calls it? And what do you do if that method needs to make use of dispatch()?

推荐答案

首先，关于您的编辑，该存储库中的组件旨在让您将函数作为道具传递给组件.这些将在 React 生命周期方法 运行时运行.出于某些原因，这很有用.但这些原因在该存储库中进行了解释，与您的问题无关.

First, about your edit, that the component at that repo is intended to let you pass functions to the component as props. These will run whenever the React lifecycle methods are run. This is useful for reasons. But those reasons are explained in that repo and not relevant to your question.

另外，你看到了这个:

const mapDispatchToProps = { getAllTehDatas };

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

This is ES6 shorthand notation. It just means:

const mapDispatchToProps = { getAllTehDatas: getAllTehDatas };

即属性名称与变量名称相同.因为这是一个很常见的操作，所以有人聪明地想出了这个速记.如果您不了解它，可能会非常混乱.您应该阅读关于 es6.

That is, the name of the property is the same as the name of the variable. Because it's such a common operation, someone clever came up with this shorthand. It can be very confusing if you don't know about it. You should read about es6.

继续前进.

有许多概念没有清晰地描述.哑组件.智能组件.容器组件.演示组件.连接的组件.纯功能组件.这是很多.

There are a number of concepts that are not sharply delineated. Dumb components. Smart components. Container components. Presentational components. Connected components. Pure functional components. It's a lot.

容器组件是智能组件，而展示组件是哑组件.

Container components are smart components and presentational components are dumb components.

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

Sometimes dumb components are a little bit smart. Maybe they have an animation on mouse over. They can even have state.

纯函数式组件只是一个函数.所以没有方法也没有状态.这意味着只有道具.由于不能有状态或额外的逻辑，纯功能组件总是表现性的.

Pure functional components are just a function. So no methods and no state. That means only props. Since there cannot be state or extra logic, pure functional components are always presentational.

连接组件是高阶组件.这只是一个将您的组件呈现为子组件的父组件.它还在优化渲染方面发挥了一些作用.

A connected component is a Higher Order Component. This is just a parent component that renders your component as a child. It also does a bit of magic to optimize rendering.

展示组件应该只展示东西而不是做东西.如果在您单击或输入内容时完成了操作，则应由父级处理，该父级可以将处理程序传递给表示组件.展示组件可以做一些的事情，但这些东西不能影响它们之外的任何东西.

Presentational components should only show stuff but not do stuff. If stuff gets done when you click or type in them, it should be handled by a parent, which can pass handlers to the presentational component. Presentational components are allowed to do some things, but these things must not influence anything outside them.

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

Container components are supposed to determine what happens. It's where the logic gets crammed into. It's more a React concept than a Redux concept.

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

Connected components are created with connect. When that's called, we pass some functions. mapStateToProps and mapDispatchToProps.

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

mapStateToProps can do anything it needs to to generate some props for your component to use. This means that your component then can use these props without having to process the data further. All needed processing can be done in mapStateToProps.

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

mapDispatchToProps can do anything it needs to do to pass functions that are used directly as event handlers. Often we pass bound action creators, which usually already do everything that the handler needs to do anyway. But we can pass any function and give it any name. So we can call it onClick and pass whatever function we like. You can also create complex action creators with the help of Redux-Thunk to make any event handler into a smart action creator. Thunked action creators have access to dispatch and state.

以上 2 段概述了一个有趣的点:在我们的 mapStateToProps 和 mapDispatchToProps 的帮助下，connect 创建的 HOC 可以很容易地制作变成一个完整的智能组件，并且被包装的组件可以是完全展示的，即使生成的 HOC 是做智能的事情.

The above 2 paragraphs outline an interesting point: the HOC created by connect with the help of our mapStateToProps and mapDispatchToProps can easily be made into a full smart component, and the wrapped component can be completely presentational, even if the resulting HOC is to do smart stuff.

或者得到这个:你可以connect一个已经连接的组件.脑洞大开，肯定.这样做有用吗?当然可以.一个组件可能需要一些来自状态的通用数据，无论它在哪里使用.你connect它到那个数据.然后可以将生成的组件connect连接到特定于它在其他地方使用的地方的数据.常见的?没有.有用吗?是的！

Or get this: you can connect an already connected component. Mind blowing, surely. Is it useful to do so? Of course it could be. A component may need some general data from state wherever it's used. You connect it to that data. The resulting component can then be connected to data specific to the place where it's used elsewhere. Common? No. Useful? Yes!

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

You can also wrap a presentational component in a container component which then gets wrapped with connect. This might be what you're looking for. You can then use componentDidMount to do the fetch in the container component.

但是出于两个原因，将展示组件与其智能分开是有用的:

But presentational components are only usefully separated from their smarts for 2 reasons:

• 可重用性
• 可测试性

如果两者都不需要，则不应将两者分开.为什么要把事情复杂化而没有收获?

If you need neither then you should not separate the two. Why complicate things with no gain?

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

Also, use componentDidMount, not componentWillMount. The latter also runs server-side, if you use universal components. You don't want your fetch running on the server.

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

Note that even though a connected component is clearly a wrapper, you should not think of it like that. Think of it as a plugged-in version of the original. The wrapping is just an implementation detail. Also, the wrapper is created and maintained by React-Redux and its bowels are not to be messed around with. This means you cannot change the componentDidMount of the wrapper, or any other part for that matter. And when I say you can't, I mean you totally can but really shouldn't.

总而言之，我建议您了解 React、Redux 和 React-Redux.它们搭配得很好，但不是一回事.

To recap, I recommend understanding React, Redux and React-Redux. They go well together, but are not the same thing.

在掌握概念后，您只需做您认为最好的事情即可.制定自己的规则.

After you grasp the concepts, you just do what you think is best. Make your own rules.

这篇关于你如何将 componentDidMount() 与 react-redux connect() 混合?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！