Блог

Главная - Вопросы по программированию - Последовательно выполнить два действия Redux Typescript

Последовательно выполнить два действия Redux Typescript

#reactjs #typescript #redux #promise #async-await

#reactjs #typescript #сокращение #обещание #асинхронный -ожидание

Вопрос:

Я совсем новичок в Typescript и пытаюсь отправить два вызова API в базу данных. Второе должно выполняться только после разрешения первого. Решение должно работать с Redux-Thunk (а не с Redux Saga). Я безуспешно пробовал async / await и promises. Я не смог найти никаких полезных ответов в других сообщениях.

Первое действие

   private placeOrder(addressId?: number, projectId?: number) {
     this.props.dispatch(
       requestAPIActions.load<RequestApiHttpPayload>('order', {
         url: '/orders/place-order?addressId='   addressId   'amp;projectId='   projectId,
         queryType: false,
         options: {
           method: 'POST',
         }
       })
     );
   }

Второе действие

 private deleteGuest(id: number) {
    this.props.dispatch(
      requestAPIActions.load<RequestApiHttpPayload>('client', {
        url: `/clients/${id}`,
        queryType: false,
        options: {
          method: 'DELETE',
        }
      }));
  }

Редактировать

requestAPIActions.загрузка:

  declare const requestAPIActions: {
    LOAD_REQUEST: string;
 
    /**
     * Redux action to dispatch the initial request to the URL and
     * by using the given config.
     * @alias requestAPIActions.load
     * @param {String} requestId Id that describes the dispached request
     * @param {Object} payload Url and Config for Axios promise
     * @returns {Object} FSA<string, {}, RequestApiMeta>
     */
    load<Payload>(requestId: string, payload: Payload, update?: boolean): import("flux-standard-action").FluxStandardAction<string, {}, RequestApiMeta>;

Именно здесь я начинаю терять понимание того, что именно происходит.

Комментарии:

1. Что requestAPIActions.load делать? В частности, это thunk, который возвращает обещание?

2. Можете ли вы показать, где и как вы хотите отправлять эти действия и вызовы API?

3. @NicholasTower предполагая, что requestAPIActions . load — это блок, который возвращает обещание, которое вы могли бы выполнить еще раз: const combined = args => (dispatch,getState) => thunk1(args)(dispatch,getState).then(()=>thunk2(args)(dispatch,getState))

Ответ №1:

Я думаю, что решением было бы отправить второе действие в then блоке первого.

Вот пример из документации redux-thunk:

 // Meet thunks.
// A thunk in this context is a function that can be dispatched to perform async
// activity and can dispatch actions and read state.
// This is an action creator that returns a thunk:
function makeASandwichWithSecretSauce(forPerson) {
  // We can invert control here by returning a function - the "thunk".
  // When this function is passed to `dispatch`, the thunk middleware will intercept it,
  // and call it with `dispatch` and `getState` as arguments.
  // This gives the thunk function the ability to run some logic, and still interact with the store.
  return function(dispatch) {
    return fetchSecretSauce().then(
      (sauce) => dispatch(makeASandwich(forPerson, sauce)),
      (error) => dispatch(apologize('The Sandwich Shop', forPerson, error)),
    );
  };
}

// Thunk middleware lets me dispatch thunk async actions
// as if they were actions!

store.dispatch(makeASandwichWithSecretSauce('Me'));

Ответ №2:

если оба действия являются обещанием, почему бы вам просто не выполнить

 Promise.all([dispatch(action1(), dispatch(action2()])
.then(([res1,res2]) => console.log(res1,res2)
Метки: