Блог

Главная - Вопросы по программированию - Реагирует / уменьшает действие запуска сразу после завершения первого действия

Реагирует / уменьшает действие запуска сразу после завершения первого действия

#javascript #reactjs #redux #promise #redux-thunk

#javascript #reactjs #повторно #обещание #переопределение-thunk

Вопрос:

Я использую некоторый шаблон react / redux и пытаюсь найти способ отправить действие после завершения первого.

Прошло некоторое время с тех пор, как я использовал redux, поэтому я в недоумении, почему эта конфигурация для отправки действия после другого не будет работать.

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

Мой вопрос в том, почему в этой конфигурации возникают проблемы и каков правильный способ запуска действий сразу после завершения действий?

 import axios from 'axios';
import type { ThunkAction } from '../types';

export const actionOne = (value1, value2): ThunkAction => dispatch =>
  axios
   .post('/api/route', {
     params: {
       username: value1,
       password: value2
     },
      credentials: 'include' 
    })
    .then(response => {

      dispatch(actionTwo());  //this dispatch either fails completely or takes a long time to start

      dispatch({
        type: 'FETCH_ACTIONONE_SUCCESS', //this dispatch fires immediately always
        data: response
      });

    })
    .catch(err => {
      dispatch({
        type: 'FETCH_ACTIONONE_FAIL',
        data: err
      });
    });

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

1. Горячий прием: ваш ActionTwo должен отвечать за вызов второй отправки. Либо введите его напрямую, либо передайте вторую отправку в качестве обратного вызова первой.

2. Используйте asyn и ожидайте отправки

3. @SlavaKnyazev что, если вам нужно, чтобы одно действие запускалось сразу после другого без какого-либо пользовательского ввода? Можете ли вы дать ссылку на пример шаблона, который вы описываете?

4. Я предполагаю, что ActionTwo не запускает действие до тех пор, пока запрос не будет разрешен.

5. @dominic, да, вы все правильно поняли, ActionTwo выглядит точно так же, как ActionOne и даже для примера вызывает actionThree

Ответ №1:

Если вы return выполнили обещание в actionone, вы можете дождаться его, а затем вызвать actiontwo:

 export const actionOne = (value1, value2): ThunkAction => dispatch =>
  return axios.post('/api/route', { // return added here
     params: {

затем при отправке:

 const results = await dispatch( actionone )
dispatch( actiontwo )

Ответ №2:

Вы можете обернуть свое действие один в обещание и запустить действие два, когда это обещание вернется.

Ответ №3:

Действие thunk немного отличается тем, что оно возвращает функцию, которая отправляет действия. Когда вы отправляете в thunk, он не будет немедленно вызывать / регистрировать действие, если у вас нет его там за пределами обещания запроса (см. Код ниже). Итак, первое действие, которое вы должны увидеть в вашем примере, это то, FETCH_ACTIONONE_SUCCESS что вы не добавили FETCH_ACTIONONE_REQUESTED действие в начало вашего thunk.

 const thunkAction = () => dispatch => {
  // If you have one here you will see it straight away (if it's a normal action).
  dispatch({ type: 'FetchingThatThing' });

  axios(...).then(data => {
    // In your action this is the first action you would see once the request
    // is finished since you don't have the first one ^
    dispatch({ type: 'FinishedFetchingThatThing' });
  });
};