Redux 形式的数学。将字段加在一起

Question

我正在尝试使用选择器将多组字段添加到 redux 表单中。

目前我是这样做的...

componentDidUpdate(prevProps) {
    let total = (Number(this.props.tradeInTotal) + Number(this.props.thirdPartyEquipmentTotal));
    if(
      this.props.equipmentTotal != prevProps.equipmentTotal || 
      this.props.softwareTotal != prevProps.softwareTotal ||
      this.props.thirdPartyEquipmentTotal != prevProps.thirdPartyEquipmentTotal ||
      this.props.miscTotal != prevProps.miscTotal ||
      this.props.tradeInTotal != prevProps.tradeInTotal
    ){
      this.props.dispatch(change('mainForm', 'totalPurchase', total));
    }
  }

这不是特别可重复，而且从样板的角度来看非常可怕。

我还有一个奇怪的问题，就是在不止一个小计中包含数字之前，它不会开始计算（这可以通过将初始值设置为 0 来解决，但这会增加更多样板) 谁有更好的解决方案来以 redux 形式添加字段？

Answer 1

如果所有 props 都与计算 total 有关，您可以使用 Array.reduce。例如：

componentDidUpdate () {
  const total = Object.values(this.props)
    .reduce((total, value) => total + value, 0)

  if (/* new total differs from total in the store */) {
    this.props.dispatch(change('mainForm', 'totalPurchase', total));
  }
}

如果有额外的props需要省略，在总结之前使用Object.entries和Array.filter：

componentDidUpdate () {
  const totalKeys = ['equipmentTotal', 'softwareTotal', ...]
  const total = Object.entries(this.props)
    .filter(([key, value]) => totalKeys.includes(key)) // filter out non-relevant props
    .reduce((total, [key, value]) => total + value, 0)

  if (/* new total differs from total in the store */) {
    this.props.dispatch(change('mainForm', 'totalPurchase', total));
  }
}

Redux 形式的数学。将字段加在一起

Math in Redux-form. Adding Fields together

reactjs

redux

redux-form