javascript - React/Redux - 链接操作或组合 reducer

Question

我开始学习 React/Redux 来构建应用程序。我正在尝试确定针对这种情况的最佳实践。我(当前)在 Redux 中有三个状态:

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

所以现在当用户更改过滤器对象时，它会调用更新#1 的操作。但是，目的地列表取决于用户在 #1 中指定的内容。我的第一个想法是让操作流入reducer - 然后当构建#1对象时，调用reducer内的另一个操作来构建#2，它流经自己的reducer。

这本能地看起来……很糟糕。我的第二个想法是将 #1 和 #2 组合成一个仅包含两种状态的对象，在单个 reducer 中处理它并将其作为一个整体存储在 Redux 中。

在这种情况下什么是最佳实践？

Answer 1

我认为从你的reducer中调度一个action违反了单向数据流原则，所以最好不要这样做。

你的第二种方法听起来像是很好的做法，但它还取决于状态#3需要访问#1和#2的容易程度，如果你正在考虑可扩展性，最好将所有三个都保留为同一级别状态树中的 sibling 。

要实现这一目标，请创建一个操作，例如 RECEIVE_DATA，它可能如下所示:

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

使用对 API 进行(异步)调用的操作创建器。成功后，调度 RECEIVE_DATA 并且您应该有两个 reducer 都在监听 RECEIVE_DATA。

一个 reducer 与状态 #1 相关，另一个与状态 #2 相关。他们只需订阅他们所关心的状态树部分，您可以仅从一个返回 action.payload ，从另一个返回 action.meta.filter 。

我建议“有效负载”和“元”为 FSA compliant .

希望有帮助!