监控变量的变化和更新状态答案

【问题标题】：Monitoring a variable for change and updating state监控变量的变化和更新状态
【发布时间】：2018-03-26 18:13:44
【问题描述】：

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

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

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

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));}

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

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

但那行得通:)

想法？

【问题讨论】：

道具sub1、sub2和sub3从哪里来？他们也在店里吗？

标签： reactjs redux react-redux redux-form

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：