Реагировать на действие огня Redux сразу после завершения первого - PullRequest
Новая
       20

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

2 голосов
/ 31 марта 2019

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

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

В этом примере представьте, что 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
      });
    });

Ответы [ 3 ]

0 голосов
/ 31 марта 2019

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

0 голосов
/ 31 марта 2019

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

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' });
  });
};
0 голосов
/ 31 марта 2019

Если вы 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 )
...