Redux store 不会随着 react state 的改变而改变

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

Redux store 不会随着 react state 的改变而改变

Redux store doesn't change with the change of react state

javascript

reactjs

redux

redux-thunk

react-redux