监视变量的变化和更新状态

Question

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

这与我在此处提出的另一个问题有关（如果您需要上下文），但具体到如何监视和调用更改事件。

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

let total = (this.props.sub1 + this.props.sub2 + this.props.sub3);

然后我想在每次 total 更改时为 total 更新我的 redux 状态...

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

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

这行得通，但似乎应该有一种方法可以仅监控总数与每个潜艇来设置此状态。像这样...

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

但这行得通:)

想法？

Answer 1

当 total 在具有 sub1、sub2 和 sub3 的不同组件中呈现时，创建 this.props.total 是有意义的。 total可以通过容器计算

此外，考虑使用重新选择 (https://github.com/reactjs/reselect)。

Answer 2

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

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

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

监视变量的变化和更新状态

Monitoring a variable for change and updating state

reactjs

redux

redux-form

react-redux