问如何使用Redux在React组件之间传达UI状态更改？
EN

Stack Overflow用户

提问于 2015-11-06 15:28:05

回答 2查看 6.6K关注 0票数 16

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

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

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

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

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

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

对我来说，通过一个动作来做这件事似乎有点奇怪，因为它引入了一种“间接”。

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

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

javascript

reactjs

redux

回答 2

Stack Overflow用户

发布于 2015-11-06 16:20:15

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

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

我们的redux状态主要由通过xhr请求或从共享状态收集的数据组成。共享状态的一个示例是管理使用该范围显示数据的多个组件之间的时间范围。在本例中，我们将触发redux操作；使用更改后的状态更新日期状态(同时还通过xhr更新一些其他状态项)，然后最终返回组件并重新呈现。

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

为了解决您的第二个问题，redux建议使用Smart & Dumb组件概念。所以您是对的，您将向下传递一个函数，以供哑巴组件使用。

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

mapDispatchToProps示例

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

所以这在99%的情况下都是有效的，但我遇到过一些使用全局事件总线的情况，所以在尝试尽可能坚持使用Smart / Dumb组件方法时，不要害怕同时使用这两种方法。

顺便说一句，我建议使用reselect将redux状态映射到智能组件。你也可以找到其他很棒的redux资源here (列出了我们使用的一些东西)。

票数 7

Stack Overflow用户

发布于 2015-11-06 16:13:06

对话框的状态应该在redux存储中，由操作触发。是否应该呈现它应该通过检查redux存储中的状态来确定。

App.render()应该是这样的：

render() {
  const { showDialog } = this.props;

  return (
    <div>
      <AppBar ... />
      { showDialog ? <PostFormDialog ... /> : false }
      <PostList ... />
    </div>
  );
}