如何使用Redux在React组件之间传递UI状态更改？ [英] How to communicate UI state changes between React components with Redux?

问题描述

据我所知，Redux是关于将UI的所有状态保存在一个商店中（以便能够轻松地再现某些状态并且没有副作用）。您可以通过触发减速器的触发操作来操纵状态。

as far as I understood Redux it is about keeping all state of the UI in one store (to be able to reproduce certain states easily and to have no side-effects). You can manipulate the state via triggering actions which trigger reducers.

我目前正在编写一个类似博客的小应用程序，您可以在其中创建和编辑帖子。我有一个用于创建帖子的对话框，大致是 app 组件的 render 方法返回如下内容：

I am currently writing a small blog-like app where you can simply create and edit posts. I have a dialog for creating a post, roughly the render method of the App component returns something like this:

<div>
    <AppBar ... />
    <PostFormDialog
      addPost={actions.addPost}
      ref="postFormDialog" />
    <PostList
      posts={posts}
      actions={actions} />
</div>

我的问题是：对话框的状态（打开或关闭）是否应该是状态对象的一部分应用程序组件？因此，应该通过操作触发打开和关闭对话框，而不是执行以下操作：

My question is: should the state of the dialog (opened or closed) be part of the state object of the App component? And should therefore opening and closing the dialog be triggered via an action instead of doing something like the following:

onTriggerCreatePostDialog(e) {
    this.refs.postFormDialog.show();
}

其中 onTriggerCreatePostDialog 是通过创建按钮左右通过一些点击监听器触发。

where onTriggerCreatePostDialog is triggered via some click listener on a "create" button or so.

通过动作对我来说似乎有点奇怪，因为它引入了一种间接。

It seems a little bit strange to me to do it via an actions because is introduces kind of an "indirection".

但是，假设我想重新使用对话框进行编辑操作，我必须能够从组件结构更深层的元素中打开对话框例如，来自 Post 组件，该组件是 PostList 组件的子组件。我能做的是通过 props 属性在层次结构中传递 onTriggerCreatePostDialog 函数，但这对我来说似乎很麻烦。 ..

However, assuming that I want to reuse the dialog for the edit action, I must be able to open the dialog from elements which are deeper in the component structure, for example from a Post component which is a child of the PostList component. What I could do is pass the onTriggerCreatePostDialog function down the hierarchy via the props property, but that seems cumbersome to me...

所以最后的结果也是关于不在直接父子关系中的组件之间的通信。还有其他选择吗？我应该以某种方式利用全球事件总线吗？我目前还不太确定。

So int the end is is also about communicating between components which are not in a direct parent-child relationship. Are there other options? Should I somehow utilise a global event bus? I am quite unsure currently.

推荐答案

在我看来，你是在正确的道路上。一开始文档可能有点棘手，但我可以告诉你我和我的团队如何使用这个实现。

It seems to me that you are on the right path. The docs can be a bit tricky at first, but I can tell you how my team and I are using the implementation.

解决你的第一个问题;如果状态特定于组件，那么我们将该状态保持在组件中。这方面的一个例子是一个在本地记录记录的小组 - 没有其他任何东西需要知道这种行为。因此，在这种情况下，我们不会在页面更改时触发redux操作，这将使用refs在组件结构内部处理。

To address your first question; if the state is specific to a component then we keep that state with the component. An example of this would be a panel that pages records locally --- nothing else needs to be aware of that behavior. So in this instance we wouldn't trigger a redux action when the page changed, that would be handled internally within the component structure using refs.

我们的redux状态主要包含通过xhr请求或从共享状态收集的数据。共享状态的示例是管理使用该范围来显示数据的多个组件之间的时间范围。在这种情况下，我们将触发redux动作;更新日期状态，无论它被更改为什么（同时还通过xhr更新一些其他状态项），然后最终返回到组件并重新渲染。

Our redux state is comprised primarily of data collected via xhr requests or from a shared state. An example of shared state would be managing a time range among multiple components that use that range to display data. In this instance we would trigger a redux action; update the date state with whatever it was changed to (while also updating some other state items via xhr) and then ultimately that gets back to the components and they re-render.

话虽如此，通过refs触发动作是完全可以接受的，它只是具体的用例。

With that said, triggering actions via refs is totally acceptable, it's just about what the specific use case is.

解决你的第二个问题; redux建议使用 Smart&愚蠢的组件概念。因此，你是正确的，你将在树下传递一个函数，以便使用愚蠢的组件。

To address your second question; redux recommends using the Smart & Dumb component concept. So you are right that you would pass a function down the tree for the dumb components to utilize.

我们在 connect setup。所以基本上你传递一个返回函数dispatchers对象的函数。您将能够直接在智能组件的 this.props 中访问这些功能。

We utilize mapDispatchToProps in our connect setup. So basically you pass a function that returns an object of function "dispatchers". You will be able to access those functions directly in your smart component's this.props.

mapDispatchToProps示例

Example of mapDispatchToProps

function mapDispatchToProps(dispatch) {
  return {
    myAction: () => dispatch(actions.myAction()),
  };
}

因此99％的时间都有效，但我遇到了一些在我们使用全局事件总线的情况下，所以不要害怕在尝试尽可能多地使用Smart / Dumb组件方法时同时使用两者。

So that works 99% of the time, but I've run into some corner cases where we do use a global event bus, so don't be afraid to utilize both while attempting to stick to the Smart / Dumb component method as much as possible.

作为旁注，我建议使用重新选择将您的redux状态映射到智能组件。您还可以在此处找到其他优秀的redux资源（我们列出了几项内容）。

As a side note, I would recommend using reselect to map your redux state to the smart component. You can also find other great redux resources here (there are several things listed that we use).

这篇关于如何使用Redux在React组件之间传递UI状态更改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！