Почему ожидаемый создатель действий Redux не ожидает должным образом?(Реагируй Родной)

Question

В моем приложении React Native есть создатель действий, который отправляет действие для обновления состояния в хранилище Redux.Я вызываю этого создателя действия с помощью «await», а затем выполняю setState (), но я заметил, что хранилище Redux обновляется ПОСЛЕ завершения setState.Мой код выглядит следующим образом:

updateFunction = async () => {
  await this.props.actionCreator1();
  this.setState({property1: this.props.property1});
}

Я ждал отправки действия, потому что мне нужно обновить хранилище, прежде чем я установлюState ().Я, должно быть, неправильно понимаю, что возвращается и т.д., когда вы отправляете действие, потому что хранилище не обновляется до тех пор, пока не запустится setState ().Кто-нибудь может объяснить, почему это могло произойти?

Спасибо!

ОБНОВЛЕНИЕ

Так я связываю свое хранилище Redux с моим компонентом

const Component1 = connect(
  state => ({
    property1: state.Reducer1.property1
  }),
  dispatch => bindActionCreators({
    actionCreator1: ActionCreators.actionCreator1
  }, dispatch)
)(Component1)

Здесь я создаю создателя действий в actions.js

export const ActionCreators = {
  actionCreator1: () => ({type: 'actionCreator1', property1: 'value'})
}

Здесь я сокращаю действия в reducer.js

const initialState = {
  property1: undefined
}

export default (state = initialState, action) {
  switch(action.type) {
    case('actionCreator1'): {
      return {
        ...state,
        property1: action.property1
      }
    }
  }
}

Answer 1

Вы не должны использовать функцию await в функции, которая не возвращает Promise, чтобы заставить ее работать, вы можете либо обернуть создателя действия так, чтобы он возвращал обещание, а затем преобразовываться в требуемое значение, либо делать другоеподход не полагаясь на асинхронное ожидание.

Вы можете определить своего создателя действия, как показано ниже:

export const ActionCreators = {
  actionCreator1: () => new Promise(function (resolve, reject) {
      return resolve({type: 'actionCreator1', property1: 'value'})
  });
}

Это сработает, если вы добавите redux-thunk промежуточное ПО.

Answer 2

Я не уверен, что вы используете лучшие практики React / Redux.Вы используете действие, которое изменяет состояние избыточности, но в то же время вы пытаетесь использовать setState, который обновляет состояние React.Более того, ваш код не выполняется так, как вы ожидаете, потому что ваша await функция не основана на promise.

---

Это неявно отвечает на ваш вопрос.Возьмите приведенные ниже функции в качестве примера:

function something1(){
  setTimeout(() => console.log('before'), 2000);
}

function something2(){
  var result = new Promise(resolve => setTimeout(() => resolve(console.log('before')) ,2000));
  return result;
}

function el(){
  console.log('after')
}

updateFunction = async () => {
  await something1(); // await something2();
  el();
  return 'done';
};

и попробуйте сначала запустить updateFunction() в консоли.Поскольку функция something1() не основана на promise, вы увидите, что она не будет await, и строка 'after' будет напечатана первой.Теперь внутри вашего updateFunction() попробуйте изменить await something1() с something2() в вашей консоли снова.Вы увидите, что остальная часть функции el() будет await для функции something2(), чтобы сначала закончить, и ваша консоль распечатает строки 'before', а затем 'after'.Надеюсь, это немного прояснит ситуацию.