React/Redux 在第一个动作完成后立即触发动作

Posted 2023-02-22

【中文标题】React/Redux 在第一个动作完成后立即触发动作

【英文标题】：React/Redux fire action immediately after first action completes

【发布时间】：2019-08-21 11:35:24

【问题描述】：

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

【问题讨论】：

热点：你的 ActionTwo 应该负责调用第二个 dispatch。要么将其直接放入，要么将第二个调度作为回调提供给第一个。

使用异步并等待您的调度

@SlavaKnyazev 如果您需要一个操作在没有任何用户输入的情况下立即触发另一个操作怎么办？你能链接到你描述的模式的例子吗？

我的猜测是 actionTwo 在请求解决之前不会触发操作。

@dominic，是的，你没看错，actionTwo 看起来和 actionOne 完全一样，甚至为了示例的缘故，它也调用了 actionThree

【参考方案1】：

如果你returnactionone中的promise，你可以等待它然后调用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，因为您没有在 thunk 顶部添加 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' );
  );
;