javascript - React-Redux：处理同一个 redux 状态属性的多次更改

Question

假设 Redux store 有一个 state 属性叫做number，初始值为 0，它还使用了一个基本的 dispatch 函数和一个基本的 action creator，所以我们可以使用changeNumber来改变number的值，当然这也是在减速机。

像这样的东西：

const CHANGE_NUMBER = "CHANGE_NUMBER";

//action creator
const AC_change_number = function(n) {
  return {type: CHANGE_NUMBER, number: n}
}

//Mapping state and dispatch
const mapStateToProps = function(state) {
  return {number: state.number};
}

const mapDispatchToProps = function(dispatch) {
  return {changeNumber: function(n) {
    dispatch(AC_change_number(n));
  }};
}

const defaultState = {number: 0}
const rootReducer = function(state=defaultState, action) {
  switch(action.type) {
    case CHANGE_NUMBER:
      return Object.assign({}, state, {number: action.number});
      break;
    default:
      return state;
  }
}

现在让我们看看我们稍后在渲染中显示这个数字，并使用以下 onClick 函数添加一个按钮：

  handleClick() {
    this.props.changeNumber(this.props.number+1)
    this.props.changeNumber(this.props.number+1)
    this.props.changeNumber(this.props.number+3)
  }

代码流的预期行为是每次点击增加 5，但增加了 3，这表明只执行了最后一条语句。我假设所有这些动作都是同步执行的，最后一条语句是在仍然为 0 的数字上执行的，所以我需要一个方法让 dispatch 2 等到 1 完成，dispatch 3 直到 2 完成等等，会是什么实现这一目标的最佳方法？

标签： javascriptreactjsreduxreact-redux