React/Redux - 链接操作或组合减速器

Question

我开始学习 React/Redux 构建应用程序。我正在尝试确定针对这种情况的最佳做法。我（目前）在 Redux 中有三个状态：

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

这本能地似乎……不好。我的第二个想法是将#1 和#2 组合成一个只包含这两种状态的对象，在单个 reducer 中处理它并将它作为一个整体存储在 Redux 中。

在这种情况下什么是最佳做法？

Answer 1

我认为从你的 reducer 中调度一个 action 会破坏单向数据流原则，所以最好把它从 table 中去掉。

您的第二种方法听起来不错，但它还取决于状态 #3 需要访问 #1 和 #2 的难易程度，如果您正在考虑可伸缩性，最好将所有三个都保持不变状态树中的级兄弟。

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

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

使用对 API 进行（异步）调用的动作创建器。成功时，调度 RECEIVE_DATA 并且你应该有两个 reducer 都在监听 RECEIVE_DATA.

一个减速器关注状态#1，另一个减速器关注状态#2。他们只是订阅他们关心的状态树的一部分，你可以 return 一个 action.payload 和另一个 action.meta.filter。

我建议 'payload' 和 'meta' 只是 FSA compliant。

希望对您有所帮助！

React/Redux - Chaining Actions or combining reducers