Как дождаться выполнения dispatch'а с передачей в него async action в redux?

Question

[Данил Чекалин]

Есть код:

dispatch({type: Constant.SOME_OPERATION_1})
dispatch(createAccount())
dispatch({type: Constant.SOME_OPERATION_2})

`createAccount` являелся async action'он и выглядит примерно так:

export const createAccount = () => async (dispatch) => {
	// request api
	// dispatch({type: SMTH})
	// another request api
	// dispatch({type: SMTH2})
}

Answer 1

[Антон Спирин]

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

const someCall = () => async dispatch() => {
  dispatch({type: Constant.SOME_OPERATION_1});
  await dispatch(createAccount());
  dispatch({type: Constant.SOME_OPERATION_2});
};

export const createAccount = () => async (dispatch) => {
  await request api;
  dispatch({type: SMTH});
  await another request api;
  dispatch({type: SMTH2});
}

Так же для обработки неудачных ответов сервера можно использовать try/catch:

export const createAccount = () => async (dispatch) => {
  try {
    await request api;
    dispatch({type: SMTH});
    await another request api;
    dispatch({type: SMTH2});
  catch (e) {
    // handle error here
  }
}

Comments

[Данил Чекалин]

Антон, вы уверены в ответе? Посмотрите на исходный код https://github.com/reduxjs/redux/blob/master/src/c...
Функция dispatch будет возвращать ссылку на саму async функцию и в await перед dispatch'ем нет ни какого смысла.

[Антон Спирин]

Данил Чекалин,

Посмотрите на исходный код...
Функция dispatch будет возвращать ссылку на саму async функцию и в await перед dispatch'ем нет ни какого смысла.

Если бы вы внимательней ознакомились с кодом по ссылке которую привели, то заметили бы, что функция на, подсвеченную вами, 197 строку попасть не может. Использование асинхронных действий подразумевает использование middleware. Такого как, например, redux-thunk. Вот, что проиcходит с dispatch при применении middleware вызовом applyMiddleware. А сценарий для возвращаемых функций, в случае использования redux-thunk, будет такой.

Без использования middleware должно выпасть исключение:

Actions must be plain objects. Use custom middleware for async actions.

Так что middleware, думаю, у вас подключено. И скорей всего это именно redux-thunk.