React/Redux - 链接动作或组合化简器

React/Redux - Chaining Actions or combining reducers

本文关键字：组合 Redux 链接 React      更新时间：2023-09-26

我开始学习React/Redux来构建一个应用程序。我正在尝试确定这种情况的最佳实践是什么。我（目前）在 Redux 中有三个状态：

  1. 用户指定的筛选器对象列表
  2. 状态 #1 被传递给处理它的 API 调用并返回目标列表
  3. 按 #1 和 #2 过滤并显示给用户的第三个建筑物列表。

因此，现在当用户更改筛选器对象时，它会调用更新 #1 的操作。但是，目标列表取决于用户在 #1 中指定的内容。我的第一个想法是让动作流入化简器 - 然后当构建 #1 对象时，调用化简器内的另一个动作来构建 #2，它流经自己的化简器。

这本能地似乎...坏。我的第二个想法是将 #1 和 #2 组合成一个仅包含两种状态的对象，在单个化简器中处理它，并将其作为单个部分存储在 Redux 中。

在这种情况下，什么被认为是最佳实践？

我认为从您的化简器调度操作会破坏单向数据流原则，因此最好将其从桌面上删除。

您的第二种方法听起来像是很好的做法，但它也取决于状态 #3 需要访问 #1 和 #2 的难易程度，如果您正在考虑可伸缩性，最好将所有三者保留为状态树中的相同级别的同级。

为此，请创建一个操作，例如 RECEIVE_DATA，它可能如下所示：

{
  type: 'RECEIVE_DATA',
  payload: { /* data from API */ },
  meta: {
    filter: [ /* filter tags */ ]
  }
}

使用对 API 进行（异步）调用的操作创建器。成功后，调度RECEIVE_DATA，您应该有两个化简器都在侦听RECEIVE_DATA。

一个化简器关注状态 #1，另一个关注 #2。它们只需订阅它们所关注的状态树部分，您可以只从其中一个返回action.payload，从另一个返回action.meta.filter。

我建议"有效载荷"和"元"只是为了符合 FSA。

希望对您有所帮助！

相关文章：