React/Redux - 链接动作或组合减速器答案

【问题标题】：React/Redux - Chaining Actions or combining reducersReact/Redux - 链接动作或组合减速器
【发布时间】：2016-03-21 01:11:33
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

我认为从你的 reducer 分派一个动作会破坏单向数据流原则，所以最好不要考虑。

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

要实现这一点，请创建一个操作，例如 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。

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

希望有帮助！

【讨论】：

这很有帮助，谢谢。我在操作本身中开发了“新”过滤器，并从该过滤器对象生成了 API URL。我正在使用 redux-promise，因此使用 Axios 生成带有我放入 action.payload 的 URL 的 promise，并按照您的建议将新的过滤器对象存储在 meta.filter 中。这两个减速器就像一个魅力！
很高兴听到！我仍在整理构建明确定义的状态结构的最佳方法，我正在学习的是，减少开销的一个非常好的方法是使您的状态与您的数据库架构平行。还没有机会玩 redux-promise 但是当我这样做时，我会记住 Axios；谢谢！