Вопрос по reactjs, html, redux, javascript, redux-thunk – Redux Thunk: вернуть обещание от отправленного действия

6

Можно ли вернуть обещание / сигнал от создателя действия, разрешенный, когда Redux thunk успешно отправил определенное действие?

Рассмотрим создателя этого действия:

function doPost(data) {
    return (dispatch) => {
        dispatch({type: POST_LOADING});
        Source.doPost() // async http operation
            .then(response => {
                dispatch({type: POST_SUCCESS, payload: response})
            })
            .catch(errorMessage => {
                dispatch({type: POST_ERROR, payload: errorMessage})
            });
    }
}

Я хочу вызвать некоторую функцию асинхроннов компоненте после звонкаdoPost создатель действий, когда Redux отправил действия POST_SUCCESS или POST_ERROR. Одним из решений было бы передать обратный вызов самому создателю действия, но это сделало бы код запутанным и трудным для понимания и поддержки. Я мог бы также опрашивать состояние Redux в цикле while, но это было бы неэффективно.

В идеале решение - это обещание, которое должно разрешаться / отклоняться при отправке определенных действий (в данном случае POST_SUCCESS или POST_ERROR).

handlerFunction {
  doPost(data)
  closeWindow()
}

Приведенный выше пример должен быть реорганизован, поэтому closeWindow () вызывается только тогда, когда doPost () успешен.

Ваш Ответ

1   ответ
8

function doPost(data) {
    return (dispatch) => {
        dispatch({type: POST_LOADING});
        // Returning promise.
        return Source.doPost() // async http operation
            .then(response => {
                dispatch({type: POST_SUCCESS, payload: response})
                // Returning response, to be able to handle it after dispatching async action.
                return response;
            })
            .catch(errorMessage => {
                dispatch({type: POST_ERROR, payload: errorMessage})
                // Throwing an error, to be able handle errors later, in component.
                throw new Error(errorMessage)
            });
    }
}

Сейчас,dispatch функция возвращает обещание:

handlerFunction {
  dispatch(doPost(data))
      // Now, we have access to `response` object, which we returned from promise in `doPost` action.
      .then(response => {
          // This function will be called when async action was succeeded.
          closeWindow();
      })
      .catch(() => {
          // This function will be called when async action was failed.
      });
}
Кроме того, по какой-то причине пример возвращает объект Action, отправленный внутрь then, а не ответ Tuomas Toivonen
Да. Код внутриhandlerFunction всегда будет вызываться послеdispatch код. 1ven
Могу ли я гарантировать, что тогда создатель внутреннего действия будет вызываться раньше, чем внутри функции handlerFunction? Tuomas Toivonen
Вы должны вернутьсяresponse от.then функция, если вы хотите обработать ответ после отправки асинхронного действия. Вы можете проверить обновленный ответ для получения дополнительной информации. 1ven

Похожие вопросы