如何将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 明显没有键：值对？如果 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()?

推荐答案

首先，关于你的编辑，该repo中的组件旨在让你将函数作为props传递给组件。只要运行 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.

以上两段概述了一个有趣的观点：在我们的<$ c的帮助下，由连接创建的HOC $ c> mapStateToProps 和 mapDispatchToProps 可以轻松制作成一个完整的智能组件，包装的组件可以完全呈现​​，即使生成的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 ed到特定于其他地方使用的地方的数据。共同？号有用吗？是的！

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 。如果使用通用组件，后者也在服务器端运行。你不希望你的fetch在服务器上运行。

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屋！