Question

我目前正在尝试确定我在React / Redux中监视变量的选项，并在变化时使用它来更新状态。

这与我在这里提出的另一个问题有关（Math in Redux-form. Adding Fields together，如果您想要上下文），但具体是如何监控和调用更改事件。

我使用3个状态（映射到道具），然后像这样添加它们......

secp160r1

然后，我希望每次let total = (this.props.sub1 + this.props.sub2 + this.props.sub3);更改时total更新我的redux状态...

目前，我正在观察每个子状态的更改，然后像这样更新总数......

total

这样可行，但似乎应该有一种方法来监控总数与每个潜水艇来设定这种状态。像这样......

    if(this.props.sub1 != prevProps.sub1 || 
       this.props.sub2 != prevProps.sub2 ||
       this.props.sub3 != prevProps.sub3){ 
        this.props.dispatch(change('mainForm', 'total', total));}

但是有效：）

思想？

Answer 1

在使用sub1，sub2和sub3在不同组件中呈现this.props.total时，创建total是有意义的。 total可由容器计算。

另外，请考虑使用Reselect（https://github.com/reactjs/reselect）。

Answer 2

React（和Redux）提倡所有应用程序状态都有一个单一的事实来源。在这种情况下，total只是由sub构建的。因此，不将它包含在商店中是有意义的（如果sub已经存储在商店中），只需在组件本身中计算它。

这可以在mapStateToProps中的connect中完成，也可以使用选择器（例如reselect）完成。

connect(
  function(state, ownProps) {
    return {
      total: state.total.sub1 + state.total.sub2
    }
  }
)

监视变量以进行更改并更新状态

2 个答案: