Question

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

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

目前我有一个“总计”组件订阅商店，并在任何购物清单项目（作为道具传递给它）发生变化时重新计算总数。然后，这会将重新计算的总数保存到商店。虽然这有效并且看起来比试图预测对总数有影响的每个动作更强大，但它确实意味着应用重新渲染两次：首先是项目更改时，然后是重新计算总数时。

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

-

目前的流程可概括为：

用户修改购物清单项目
调度操作，使用修改后的购物清单更新商店
新状态通过应用
价格总计组件接收新道具，重新计算总数并将更新的总数发送到商店
新状态通过应用

Answer 1

您使用Total组件计算总数然后调度操作以更新商店中的总数这一事实使事情变得复杂。你的总数实际上只是你所在州的其他部分的推导，而不需要存储在州本身。

假设您正在使用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。它允许您创建＆＃34; memoized＆＃34;选择器只会在状态的相关部分发生变化时执行重新计算，否则它们将从内存中返回派生值。这些选择器可以在任何地方导入，因此如果您需要，也可以在其他地方轻松显示总数。

Answer 2

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

void componentWillReceiveProps(
  object nextProps
)

来自官方文档的引用：

＆＃34;当组件接收新道具时调用。这种方法不是   要求初始渲染。

以此为契机，对之前的道具过渡作出反应   通过使用this.setState（）更新状态来调用render（）。该   可以通过this.props访问旧道具。调用this.setState（）   在此函数中不会触发额外的渲染。＆＃34;

这意味着当您对购物清单进行修改时，您可以在不触发第二次渲染的情况下计算componentWillReceiveProps函数中的总数。

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

2 个答案: