从 Redux Store in Action Creator 获取状态的最佳方式答案

【问题标题】：Best Way to Get State from Redux Store in Action Creator从 Redux Store in Action Creator 获取状态的最佳方式
【发布时间】：2019-01-01 18:23:39
【问题描述】：

我的商店是这样的：

{
    nodes: {
        node1: { childIds: [], },
        node2: { childIds: [], },
    },
    selectedNode: 'node1',
}

我有一个像这样的 ADD_CHILD 操作：

export function addChild(parentId, childId) {
  return {
    type: ADD_CHILD,
    parentId,
    childId,
  };
}

reducer 在 parentId 对象的 childIds 下添加 childId。所以，addChild('node1', 'node2') 导致这种状态：

{
    nodes: {
        node1: { childIds: ['node2'], },
        node2: { childIds: [], },
    },
    selectedNode: 'node1',
}

到目前为止一切顺利。

我想做的是让 parentId 参数在我的操作创建器中是可选的。如果未指定给操作创建者，我希望我的逻辑自动默认 parentId 为商店中的 selectedNode 值。

默认使用商店中的值的最佳实践方法是什么？我能想到的选项：

使用 Redux-thunk 或类似方法来访问我的操作创建器中的状态并将 selectedNode 值拉到那里。我倾向于这种方法...除了在我的动作创建器中扩展逻辑量之外，我没有看到很多缺点。
扩展我的节点 reducer 以覆盖更多的状态区域，包括 selectedNode 到它接收到的状态。我不喜欢这样，因为它增加了 reducer 的复杂性并将接口状态放入我的节点数据中。
使用 mapStateToProps 将 selectedNode 值作为道具告诉我的组件，因此当它调用动作创建者时，它可以传递它。我不喜欢这样，因为它会导致我的组件在 selectedNode 更改时重新渲染（否则此组件不需要这样做）。

还有其他选择吗？我主要对最佳实践感兴趣，因为我认为这些方法中的任何一种都行得通。

【问题讨论】：

标签： reactjs redux redux-thunk

【解决方案1】：

我建议你看看reduce-reducers。

Redux 提供的众所周知的combineReducers() 并行运行 reducer，如果你愿意的话，每个 reducer 只知道自己范围内的状态。 reducer 的其他配置也是可能的。 例如，您可以 reduce 一个 reducer 数组，以 series 的形式运行每个，这意味着每个都将获得一个从其前体中新计算的状态对象，用于计算它将传递的新状态。

在您的情况下，这将使您的减速器了解 selectedNode，同时减少您的 ADD_CHILD 操作。如果动作中没有设置parentId，reducer可以默认为selectedNode。您只需确保更改 selectedNode 的减速器运行在处理 ADD_CHILD 的减速器的上游。

这在 Redux 文档Redux docs: sharing-data-between-slice-reducers 中以一种很好的方式（带有示例）进行了介绍。

使用这种模式可以让你避免重击，维护简单的动作创建器，仍然有简单的组件选择器，将你的状态逻辑保留在它所属的 reducer 中，并且仍然保持你的 reducer 纯净。在尝试了您自己提到的大多数其他模式后，我推荐这种方法。

祝你好运！

【讨论】：

谢谢伊恩 - 描述得很好。这听起来像是一个干净的方法。