Question

我正在使用一些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
      });
    });

Answer 1

如果您在actionone中return做出承诺，则可以等待它，然后致电actiontwo：

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

然后在分发时：

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

Answer 2

您可以将“行动一”包装在一个诺言中，并在该诺言返回时解散“行动二”。

Answer 3

重击动作有点不同，它返回一个分派动作的函数。当您分派给一个thunk时，除非您在请求承诺之外有一个动作，否则它不会立即调用/记录一个动作（请参见下面的代码）。因此，您在示例中应该看到的第一个动作是 FETCH_ACTIONONE_SUCCESS ，因为您没有在重击的顶部添加 FETCH_ACTIONONE_REQUESTED 动作。

  const thunkAction =（）=> dispatch => {
  //如果这里有一个，您将立即看到它（如果是正常操作）。
  dispatch（{type：'FetchingThatThing'}）;

  axios（...）。then（data => {
    //在您的操作中，这是您一旦请求就会看到的第一个操作
    //因为没有第一个^而结束
    dispatch（{type：'FinishedFetchingThatThing'}）;
  }）;
};

第一个动作完成后立即执行React / Redux动作

3 个答案: