javascript - 如何使用 Redux 传达 React 组件之间的 UI 状态变化？

Question

就我对 Redux 的理解而言，它是关于将 UI 的所有状态保存在一个存储中(以便能够轻松地重现某些状态并且没有副作用)。您可以通过触发 reducer 的触发操作来操纵状态。

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

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

我的问题是:对话框的状态(打开或关闭)应该是 App 组件的状态对象的一部分吗？因此，应该通过操作触发打开和关闭对话框，而不是执行以下操作:

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

其中 onTriggerCreatePostDialog 是通过某个“创建”按钮上的点击监听器触发的。

我觉得通过一个 Action 来做这件事有点奇怪，因为它引入了一种“间接”。

但是，假设我想为编辑操作重用对话框，我必须能够从组件结构中较深的元素打开对话框，例如从 Post 组件是 PostList 组件的子组件。我可以做的是通过 props 属性将 onTriggerCreatePostDialog 函数向下传递到层次结构中，但这对我来说似乎很麻烦...

因此，最终也是关于在不存在直接父子关系的组件之间进行通信的。还有其他选择吗？我应该以某种方式利用全局事件总线吗？我目前还不确定。

Answer 1

在我看来，您走在正确的道路上。这些文档起初可能有点棘手，但我可以告诉您我和我的团队是如何使用该实现的。

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

我们的 redux 状态主要由通过 xhr 请求或共享状态收集的数据组成。共享状态的一个示例是在使用该范围显示数据的多个组件之间管理时间范围。在这种情况下，我们将触发一个 redux Action ；使用更改后的内容更新日期状态(同时还通过 xhr 更新一些其他状态项)，然后最终返回到组件并重新渲染。

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

回答你的第二个问题； redux 建议使用 Smart & Dumb组件概念。所以你是对的，你会把一个函数传递到树下供dumb组件使用。

我们在 connect 中使用 mapDispatchToProps设置。所以基本上你传递了一个返回函数“调度程序”对象的函数。您将能够直接在智能组件的 this.props 中访问这些功能。

mapDispatchToProps 示例

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

所以这在 99% 的时间都有效，但我遇到了一些我们确实使用全局事件总线的极端情况，所以在尝试坚持使用智能/dumb组件方法时不要害怕同时使用两者尽可能多。

作为旁注，我建议使用 reselect将您的 redux 状态映射到智能组件。您还可以找到其他很棒的 redux 资源 here (列出了我们使用的几种东西)。