Блог

У меня есть создатель действия, который выполняет асинхронный запрос и обновляет состояние (используя промежуточное программное обеспечение react-redux):

 export function requestA() {
  return function (dispatch) {
    dispatch(startRequest())
    return Service.getA().then(
      data => dispatch(receivedA(data)),
      error => console.log("An error occurred.", error)
    )
  }
}
  

Это работает нормально.
Теперь я хочу создать другого создателя действия, который будет использовать создателя requestA() действия и вызовет другой асинхронный запрос.

 export function requestB() {
  return function (dispatch, getState) {
    dispatch(requestA()) // <--- How to await for this ???
    let A_data = getState().A_data;
    return Service.getB(A_data).then(
      data => dispatch(receivedB(data)),
      error => console.log("An error occurred.", error)
    )
  }
}
  

Есть ли у меня способ дождаться dispatch(requestA()) завершения, прежде чем я продолжу запускать остальную часть функции?
Мне нужно, чтобы состояние было обновлено, прежде чем я перейду к следующему запросу.

Примечание Я знаю, что мог бы сделать это, вызвав 2 запроса в моем создателе действий, но я хочу знать, могу ли я сделать это, вызвав dispatch(requestA()) , поскольку логика для этого уже установлена.

Вам просто нужно дождаться завершения вызова функции с использованием await async ключевых слов:

 export function requestA() {
  return async function (dispatch) {
    dispatch(startRequest())
    await Service.getA().then(
      data => dispatch(receivedA(data)),
      error => console.log("An error occurred.", error)
    )
  }
}