javascript - 组件 Prop 更改后更新 redux store

Question

我想知道在 redux 中处理这种情况的最佳方法是什么，是否有任何模式可以支持或避免:

我有一个“购物 list ”组件，它由多个子项组成，每个子项都可以通过多种方式进行修改。我还跟踪购物 list 的总价，每次添加、删除或修改子项目以及其他因素时都会发生变化。

目前我有一个“总计”组件，它订阅了商店并在任何购物 list 项目(作为 Prop 传递给它)发生变化时重新计算总计。然后将重新计算的总数保存到商店中。虽然这很有效，而且看起来比尝试预测对总数有影响的每个 Action 更稳健，但这确实意味着应用程序会重新呈现两次:第一次是在项目更改时，第二次是在重新计算总数时。

我假设这可能不是解决这种情况的最佳方法，我想知道我是否可以直接在购物 list 缩减程序中或使用某种中间件做一些更整洁的事情。任何建议将不胜感激。

-

目前的流程可以概括为:

• 用户修改购物 list 项目
• Action 被调度，用修改后的购物 list 更新商店
• 新状态通过应用传播
• Price Total 组件接收新 Prop ，重新计算总数并将更新后的总数发送到商店
• 新状态通过应用传播

Answer 1

您正在使用 Total 组件计算总数，然后分派(dispatch)一个操作来更新商店中的总数，这一事实使事情变得复杂。您的总数实际上只是状态其他部分的推导，不需要存储在状态本身中。

假设您使用的是 react-redux要将您的 Total 组件连接到您的状态，您可以简单地在 connect() 的 mapStateToProps 部分中计算总数。例如:

const mapStateToProps = (state, props) => {
  return {
    total: state.shoppingList.reduce((total, item) => total + item.price, 0)
  }
}
export default connect(mapStateToProps)(Total)

(这个例子假设 state.shoppingList 是一个项目数组，每个项目都有一个 price 属性。你的情况可能有点复杂，但这个想法是一样。)

这将允许您的 Total 组件访问/显示总数，但没有任何必须重新更新状态的额外复杂性。

要提高这些状态推导的性能，请查看 reselect .它允许您创建“记忆化”选择器，这些选择器仅在状态的相关部分发生变化时才执行重新计算，否则它们将从内存中返回派生值。这些选择器可以导入到任何地方，因此如果您需要的话，也可以很容易地在其他地方显示总数。