我开始学习 React/Redux 来构建应用程序。我正在尝试确定针对这种情况的最佳实践。我(当前)在 Redux 中有三个状态:
- 用户指定的过滤器对象列表
- 状态 #1 会传递给 API 调用,该调用会对其进行处理并返回目的地列表
- 按 #1 和 #2 筛选并显示给用户的第三个建筑物列表。
所以现在当用户更改过滤器对象时,它会调用更新#1 的操作。但是,目的地列表取决于用户在 #1 中指定的内容。我的第一个想法是让操作流入reducer - 然后当构建#1对象时,调用reducer内的另一个操作来构建#2,它流经自己的reducer。
这本能地看起来……很糟糕。我的第二个想法是将 #1 和 #2 组合成一个仅包含两种状态的对象,在单个 reducer 中处理它并将其作为一个整体存储在 Redux 中。
在这种情况下什么是最佳实践?
最佳答案
我认为从你的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 .
希望有帮助!
关于javascript - React/Redux - 链接操作或组合 reducer ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36121676/