Блог

Предположим, что хранилище Redux имеет свойство состояния number с начальным значением 0, оно также использует базовую функцию отправки с создателем базового действия, поэтому мы можем использовать 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, Поэтому мне понадобится метод отправки 2, чтобы дождаться завершения 1, отправки 3, пока не будет завершено 2 и т. Д., Каков был бы лучший способ достичь этого?