Javascript 组件道具更改后更新redux存储

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

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

目前，我有一个“总计”组件，它订阅了商店，并在任何购物清单项目（作为道具传递给它）更改时重新计算总计。然后将重新计算的总数保存到存储中。虽然这样做有效，而且似乎比试图预测每一个对总量有影响的动作更为稳健，但这确实意味着应用程序会重新呈现两次：第一次是在项目发生变化时，第二次是在重新计算总量时

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

-

当前流程可概括为：

• 用户修改购物列表项
• 已调度操作，使用修改后的购物列表更新商店
• 新状态通过应用程序传播
• Price Total组件接收新道具，重新计算道具总数，并将更新的道具总数发送到商店
• 新状态通过应用程序传播

---

如果我理解正确，我认为您应该使用组件将更新功能：

void componentWillReceiveProps(
  object nextProps
)

引用官方文件：

“在组件接收新道具时调用。此方法不可用。” 调用初始渲染

利用这一机会对道具转换做出反应 通过使用此.setState（）更新状态来调用render（） 可以通过this.props.调用this.setState（）访问旧道具 在此函数中，将不会触发其他渲染。”

---

这意味着，当对购物列表进行修改时，您可以在componentWillReceiveProps函数中计算总数，而无需触发第二次渲染。

事实上，您正在使用total组件计算总数，然后发送一个操作来更新商店中的总数，这使事情变得复杂。您的总数实际上只是您所在州其他部分的派生，不需要存储在州本身中

假设您正在使用将Total组件连接到州，您只需在connect（）的MapStateTrops部分中计算Total即可。例如：

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

（本例假设

状态。shoppingList

是一个项目数组，每个项目都有

price

属性。您的情况可能稍微复杂一些，但想法是一样的。）

这将允许您的Total组件访问/显示Total，但无需重新更新状态而增加任何复杂性

---

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

谢谢Hugo。这是有道理的，尽管我需要将重新计算的总数保存回存储，然后触发第二次渲染。我可能在第一次阅读您的文章sry时错过了一些信息。您的总组件是否存在于不同的组件中？顺便说一句，如果您的total组件是唯一链接到存储在存储中的total的组件，那么它将是唯一更新的组件，而不是整个应用程序。（只调用总组件渲染函数）没问题，我实际上稍微更新了一下，让它更清晰一些。是的，总计用于应用程序的其他区域，这就是为什么它需要返回到应用商店，然后传播到各种其他组件。既然你需要更新应用商店，当你重新计算总数时，你总是会从修改你的购物清单中得到一个渲染，然后是当前装载的所有组件的渲染，我不认为这有什么问题。防止两次渲染的唯一方法是将购物清单传递给Total组件，而不是商店中的Total组件。你可以从购物清单中计算总数，避免在总数发送到商店时重新渲染（或者如果你在其他地方不需要它，你可以从你的商店中删除总数）。谢谢，这很有意义，听起来确实像我应该做的。我认为，我的假设是，存储计算值比动态计算值更可取，这让我大吃一惊——重选似乎也能解决导致这种假设的大部分问题。