Redux 存储不会随着反应状态的变化而变化

Question

我正在尝试根据当前状态更改更改 redux 存储，状态更改正确，但 this.props 仍然作为初始化。这是我的代码：

componentWillMount(){
    this.props.fetchMatches();
  }

  handleChange(newDateRange){
    console.log('====================================');
    console.log('handleChange fired');
    console.log(this.state);
    console.log('====================================');
  }


function mapDispatchToProps(dispatch) {
  return {
    handleChange: (newDateRange) =>
      dispatch({
      ...this.props.home,
      startDate: newDateRange[0],
      endDate: newDateRange[1]
    })
  }
}

export default connect(mapStateToProps, { mapDispatchToProps, fetchMatches })(Home);

这是DateRange的实现：

<DateRangeInput className="daterange" value={[this.props.startDate, this.props.endDate]} onChange={this.handleChange}  />       

Answer 1

function mapDispatchToProps(dispatch, ownProps) {
  return {
    handleChange: (newDateRange) =>
      dispatch({
      ...ownProps.home,
      startDate: newDateRange[0],
      endDate: newDateRange[1]
    })
  }
}

https://github.com/reduxjs/redux-devtools/issues/250

Answer 2

您不能从这里访问 mapDispatchToProps 中的道具，因为即使在组件安装之前调用了该函数。而是从 mapDispatchToProps 访问它，它在第二个参数中公开了先前的道具。

function mapDispatchToProps(dispatch, ownProps) {
  return {
    handleChange: (newDateRange) =>
      dispatch({
      ...ownProps.home,
      startDate: newDateRange[0],
      endDate: newDateRange[1]
    })
  }
}

mapDispatchToProps API Documentation