首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何等待从typescript中的另一个thunk调用时执行承诺的redux thunk

在 TypeScript 中,Redux Thunk 是一个中间件,用于处理异步操作。当我们在一个 Thunk 中调用另一个 Thunk 时,我们希望等待被调用的 Thunk 执行完毕后再执行当前 Thunk 中的承诺(Promise)。

要实现这个功能,可以使用 async/await 或者 Promise 的方式来处理。

使用 async/await 的方式:

  1. 首先,确保你的 Redux Thunk 中间件已经正确配置和引入。
  2. 在当前 Thunk 中,将被调用的 Thunk 包装在一个 async 函数中,并使用 await 关键字等待其执行完毕。
  3. 在等待期间,可以执行其他同步操作。
  4. 当被调用的 Thunk 执行完毕后,可以获取其返回值,并继续执行当前 Thunk 中的承诺。

以下是一个示例代码:

代码语言:txt
复制
import { ThunkAction } from 'redux-thunk';
import { RootState } from './store';

// 定义一个异步操作的 Thunk
const asyncThunk = (): ThunkAction<void, RootState, unknown, Action> => async (dispatch) => {
  // 异步操作代码
  await someAsyncFunction();
  dispatch(someAction());
};

// 当前 Thunk
const currentThunk = (): ThunkAction<void, RootState, unknown, Action> => async (dispatch) => {
  // 执行其他同步操作

  // 调用另一个 Thunk
  await dispatch(asyncThunk());

  // 继续执行当前 Thunk 中的承诺
  dispatch(someOtherAction());
};

使用 Promise 的方式:

  1. 确保 Redux Thunk 中间件已正确配置和引入。
  2. 在当前 Thunk 中,返回一个 Promise 对象,并在 Promise 的回调函数中执行被调用的 Thunk。
  3. 在等待期间,可以执行其他同步操作。
  4. 当被调用的 Thunk 执行完毕后,可以在 Promise 的 then() 方法中获取其返回值,并继续执行当前 Thunk 中的承诺。

以下是一个示例代码:

代码语言:txt
复制
import { ThunkAction } from 'redux-thunk';
import { RootState } from './store';

// 定义一个异步操作的 Thunk
const asyncThunk = (): ThunkAction<void, RootState, unknown, Action> => (dispatch) => {
  // 返回一个 Promise 对象
  return new Promise((resolve) => {
    // 异步操作代码
    someAsyncFunction().then(() => {
      dispatch(someAction());
      resolve();
    });
  });
};

// 当前 Thunk
const currentThunk = (): ThunkAction<void, RootState, unknown, Action> => (dispatch) => {
  // 执行其他同步操作

  // 调用另一个 Thunk
  return dispatch(asyncThunk()).then(() => {
    // 继续执行当前 Thunk 中的承诺
    dispatch(someOtherAction());
  });
};

这样,无论是使用 async/await 还是 Promise 的方式,都可以等待从 TypeScript 中的另一个 Thunk 调用时执行承诺的 Redux Thunk。

相关搜索:使用thunk处理redux操作中的承诺如何转换redux-thunk操作,返回使用异步/等待的承诺?从redux-toolkit中使用createAsyncThunk创建的另一个thunk分派thunk如何从传入Redux Thunk的Redux Action访问异步函数?等待从redux-thunk调度返回的值,而不是使用状态如何通过redux-thunk中的抓取操作访问状态?在redux-thunk中,Typescript ThunkAction类型的泛型类型变量是什么如何从redux工具包异步thunk的挂起状态修改另一个片的状态如何在类组件内的函数中处理redux thunk操作分派后的状态更新?在带有redux-thunk的操作( === -redux)中,cb && 'function‘数据类型cb && cb(数据)是如何工作的?如何在子组件中的props.function被分派到redux-thunk后更新Event.target在typescript中的foreach循环中承诺,从响应构造数组,并等待所有的完成当函数传递给另一个函数时,如何承诺/等待要调用的回调函数在Redux-saga中,如何从对承诺的收益预测中获得结果?如何仅使用回调(无承诺、异步/等待)在异步代码(从数据库读取)中测试Mocha中的“抛出错误”?如何在没有异步/等待的情况下从挂起的已解析承诺中获取数据?如何在JS中无承诺和异步等待糖的情况下逐个执行数组任务?如何从TypeScript中的另一个模块引用现有类型?如何从typescript中的另一个类型的成员中获取元组类型?如何从另一个容器中的容器中执行脚本?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券