首页
学习
活动
专区
工具
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。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端react面试题(必备)2

,这个保证了视图和网络请求都不能直接修改state,相反他们只能表达想要修改意图使用纯函数来执行修改state为了描述action如何改变state tree 需要编写reducereact-router...)跳转,此时只是链接变了,并没有刷新页面而标签就是普通超链接了,用于当前页面跳转到href指向另一 个页面(非锚点情况)。...redux异步流中间件其实有很多,当下主流异步中间件有两种redux-thunkredux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...Props 也不仅仅是数据--回函数也可以通过 props 传递。Reactconstructor和getInitialState区别?两者都是用来初始化state

2.3K20

如何序列化Js并发操作:回,承诺和异步等待

(可以让程序代码按照指定顺序先后执行) 最近,JavaScript引入了异步并等待(Aync / Await),这是Es7新增方法 这些方法不是相互排斥,而是相辅相成:异步/等待基于承诺建立,承诺使用回...并发操作:回承诺和异步等待\js>node unserialized. js Started async "Install OS:安装操作系统"......JavaScript并发操作:回承诺和异步等待\js>node callback.js Started async "Install OS:安装操作系统"......时,我认为记住这很有帮助,它大致相当于异步调用获得承诺并调用它then方法 一些疑难问题:你必须在标有异步功能中使用await。...编写顶级代码时,可以使用promisesthen语法代替,也可以将代码封装在标记为异步执行函数 总结 整篇文章主要是针对如何序列化js并发操作,其中序列化也就是编码方式,用什么方式将要用方式给存起来

3.1K20

深度剖析github上15.1k Star项目:redux-thunk

日益忙碌一周又过去了,是时候开始每周一次总结复盘了,今天笔者就来剖析一下githubstar数15.1k开源项目redux-thunk。...来创建action,在调用时只需要执行Actions.start()即可,我们也知道action返回是一个标准对象,但我们可以在return之前做一些side effect。...这里我们并不能在action处理异步逻辑,这也是redux-thunk价值之一,即解决异步调用action。...到这一步我们仍然不能直接进入redux-thunk源码分析,因为我们还是不清楚如何解决上述步骤,因为我们还没有了解redux中间件机制。...实现中间件机制也很简单, 就是在框架核心执行流中去遍历外部传入中间件,并依次执行即可,我们先来看看redux如何使用中间件: import { createStore, applyMiddleware

73420

第二十篇: Redux 中间件实现原理切入,理解“面向切面编程”

中间件工作模式 中间件引入,会为 Redux 工作流带来什么样改变呢?这里我们以 redux-thunk 为例,经典“异步 Action”场景切入,一起看看中间件是如何帮我们解决问题。...而 thunk 中间件似乎巧妙地“绕开”了这层校验,这背后到底藏着什么玄机呢? 要想搞清楚这个问题,你除了需要理解 thunk 执行逻辑,更重要是要知道 Redux 中间件是如何工作。...若 action 是一个函数,那么 redux-thunk 就会执行它并且返回执行结果;若 action 不是一个函数,那么它就不是 redux-thunk 处理目标,直接调用 next,告诉 Redux... Redux 中间件机制,不难看出,面向切面思想在很大程度上提升了我们组织逻辑灵活度与干净度,帮助我们规避掉了逻辑冗余、逻辑耦合这类问题。...总结 在这一讲,我们首先以 redux-thunk 中间件为例,“异步工作流”场景切入,认识了 Redux 中间件工作模式。

30030

前端高频react面试题

当调用setState时,React render 是如何工作?咱们可以将"render"分为两个步骤:虚拟 DOM 渲染:当render方法被调用时,它返回一个新组件虚拟 DOM 结构。...那为什么不要在循环、条件或嵌套函数调用 Hook 呢?因为 Hooks 设计是基于数组实现。在调用时按顺序加入数组,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误 Hook。...但是对于合成事件来说,有一个事件池专门来管理它们创建和销毁,当事件需要被使用时,就会池子复用对象,事件回结束后,就会销毁事件对象上属性,从而便于下次复用事件对象。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...setState 第二个参数是一个可选函数。这个回函数将在组件重新渲染后执行。等价于在 componentDidUpdate 生命周期内执行

3.3K20

2021年React学习路线图

React 核心库相对简单,但是只学这个库并不够,特别是创建复杂网页应用时。 我 2016 年开始用 React 开发,当任务变得越来越复杂时,我不得不学习其他辅助库,来实现这些功能。...当状态数据发生改变时,组件会再次渲染,来更新这些变更。你要理解这几个基础概念。 学习这些概念时,毫无疑问你将遇到条件渲染和列表渲染多个组件。此时,你应该创建一个简单 React 应用。...如果你刚开始学习 React,你应该更简单东西开始。 React Query 是另一个轻量级库,经常被描述成“React 中看不见数据请求库”。...reduxjs/redux-thunk https://github.com/reduxjs/redux-thunk ?...你应该学习: 用 Redux 搭建一个项目 用 Redux 做数据获取和状态管理 可选,看一下 Redux Thunk 一开始我很难理解 Redux

7.5K21

Redux开发实用教程

如果一个 model 变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 变化,依次地,可能会引起另一个 view 变化。...state 方法就是触发 action,action 是一个用于描述已发生事件普通对象; 使用纯函数来执行修改:为了描述 action 如何改变 state tree ,你需要编写 reducers...action Action 是把数据应用传到 store 有效载荷。它是 store 数据唯一来源,也就是说要改变storestate就需要触发一个action。...(action),包括组件、XMLHttpRequest 回、甚至定时器; 通过 subscribe(listener) 注册监听器; 通过 subscribe(listener) 返回函数注销监听器...为了使用异步action我们需要引入redux-thunk库,redux-thunk是为Redux提供异步action支持中间件。

1.4K20

React 入门学习(十四)-- redux 基本使用

,还有很多情况都需要使用 Redux 来实现(还没有学 hook,或许还有更好方法) (掘友文章里截图) 这张图,非常形象将纯 React 和 采用 Redux 区别体现了出来 2....方法,这个方法可以帮助我们订阅 store 改变,只要 store 发生改变,这个方法就会执行 为了监听数据更新,我们可以将 subscribe 方法绑定在组件挂载完毕生命周期函数上,但是这样...DECREMENT = 'decrement' 将这两个单词写在 constant 文件,并对外暴露,当我们需要使用时,我们可以引入这个文件,并直接使用它名称即可 直接使用 INCREMENT 即可...这时我们就需要引入中间件,在原生 redux 暴露出 applyMiddleware 中间件执行函数,并引入 redux-thunk 中间件(需要手动下载) import thunk from 'redux-thunk...,完全可以自己等待异步任务结果后再去分发同步action 6.

46520

redux-thunk中间件

redux-thunk是一种中间件,它能使你在action creator返回函数,此返回函数就是thunk函数,模拟一下就是 // thunk函数 (dispatch,getState,extraCustomArgument...同样此thunk函数可以被dispatch,并且thunk函数返回值也是dispatch返回值,另外在action creator也可以dispatch其他thunk函数。...redux-thunk解决了什么问题 ---- 在基本redux,只能dispatch同步action来更新state,那么对于dispatch异步action来更新state呢?...具体改变 ---- 之前action creator返回是action对象,现在可以返回一个thunk函数,这个函数可以执行一些副作用,不再需要保持它纯净。...另一个就是传入extraCustomArgument参数。这一部分请直接参考redux-thunk官方文档。 可以看出,redux-thunk就是一个扩展功能中间件,它源代码实现非常少!

52540

美团前端react面试题汇总

另外,浏览器爬虫不会等待我们数据完成之后再去抓取页面数据。服务端渲染返回给客户端是已经获取了异步数据并执行JavaScript脚本最终HTML,网络爬中就可以抓取到完整页面的信息。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...再对高阶组件进行一个小小总结:高阶组件 不是组件,是 一个把某个组件转换成另一个组件 函数高阶组件主要作用是 代码复用高阶组件是 装饰器模式在 React 实现封装组件原则封装原则1、单一原则...但在 React 中会有些不同,包含表单元素组件将会在 state 追踪输入值,并且每次调用回函数时,如 onChange 会更新 state,重新渲染组件。...state,相反他们只能表达想要修改意图使用纯函数来执行修改state为了描述action如何改变state tree 需要编写reduceReact 数据持久化有什么实践吗?

5.1K30

高频React面试题及详解

由于JavaScript异步事件性质,当您启动API调用时,浏览器会在此期间返回执行其他工作。...可以看到,在整个流程数据都是单向流动,这种方式保证了流程清晰。 redux原理详解 react-redux如何工作?...当然mobx和redux也并不一定是非此即彼关系,你也可以在项目中用redux作为全局状态管理,用mobx作为组件局部状态管理器来用. redux如何进行异步操作?...redux-thunk优点: 体积小: redux-thunk实现方式很简单,只有不到20行代码 使用简单: redux-thunk没有引入像redux-saga或者redux-observable额外范式... action摆脱thunk function: dispatch 参数依然是一个纯粹 action (FSA),而不是充满 “黑魔法” thunk function 异常处理: 受益于 generator

2.4K40

React 入门学习(十四)-- redux 基本使用

,还有很多情况都需要使用 Redux 来实现(还没有学 hook,或许还有更好方法) (掘友文章里截图) 这张图,非常形象将纯 React 和 采用 Redux 区别体现了出来 2....方法,这个方法可以帮助我们订阅 store 改变,只要 store 发生改变,这个方法就会执行 为了监听数据更新,我们可以将 subscribe 方法绑定在组件挂载完毕生命周期函数上,但是这样...DECREMENT = 'decrement' 将这两个单词写在 constant 文件,并对外暴露,当我们需要使用时,我们可以引入这个文件,并直接使用它名称即可 直接使用 INCREMENT 即可...这时我们就需要引入中间件,在原生 redux 暴露出 applyMiddleware 中间件执行函数,并引入 redux-thunk 中间件(需要手动下载) import thunk from 'redux-thunk...,完全可以自己等待异步任务结果后再去分发同步action 6.

55120

Redux Toolkit

Redux Toolkit 还包括一个强大数据获取和缓存功能,我们称之为“RTK Query”。它作为一组单独入口点包含在包。它是可选,但可以消除您自己手写数据获取逻辑需要。...--template redux-typescript 如果已有项目 npm install @reduxjs/toolkit or yarn add @reduxjs/toolkit api Redux...它可以自动组合你 slice reducer,添加你提供任何 Redux 中间件,redux-thunk默认包含,并启用 Redux DevTools Extension。...createAsyncThunk: 接受一个动作类型字符串和一个返回承诺函数,并生成一个pending/fulfilled/rejected基于该承诺分派动作类型 thunk import { createAsyncThunk...reducer 和 selector 来管理 store 规范化数据 重新选择库createSelector实用程序,重新导出以方便使用。

9810

react面试应该准备哪些题目

修改由 render() 输出 React 元素树Redux Thunk 作用是什么Redux thunk 是一个允许你编写返回一个函数而不是一个 action actions creators...展示专门通过 props 接受数据和回,并且几乎不会有自身状态,但当展示组件拥有自身状态时,通常也只关心 UI 状态而不是数据状态。容器组件则更关心组件是如何运作。...react全家桶有哪些react:核心redux:相当于数据,主要存储数据状态 react-redux可以完成数据订阅 redux-thunk可以实现异步action redux-logger...比如不自己state,props获取情况React 高阶组件运用了什么设计模式?...class类key改了,会发生什么,会执行哪些周期函数?在开发过程,我们需要保证某个元素 key 在其同级元素具有唯一性。

1.6K60

【React】211- 2019 React Redux 完全指南

在本篇 Redux 教程,我会渐进地解释如何Redux 与 React 搭配使用 —— 从简单 React 开始 —— 以及一个非常简单 React + Redux 案例。...count 存在 App state 里,会以 prop 形式向下传递: ? 要想数据向上传递,需要通过回函数实现,因此必须首先将回函数向下传递到任何想通过调用它来传递数据组件。 ?...学习 Redux,从简单 React 开始 我们将采用增量方法,带有组件 state 简单 React 应用开始,一点点添加 Redux,以及解决过程遇到错误。...如何保持纯 Reducers 另一个关于 reducers 规则是它们必须是纯函数。也就是说不能修改它们参数,也不能有副作用(side effect)。...如何安装 Redux Thunk 使用 NPM 或者 Yarn 安装 redux-thunk,运行 npm install —save redux-thunk

4.2K20

前端异步代码解决方案实践(二)

言简意赅,但稍微聱牙诘屈,如何表述更浅显易懂呢? 说个故事, Promise 是一个美好承诺承诺本身会做出正确延时或异步操作。...承诺会解决 callback处理异步回可能产生调用过早,调用过晚、调用次数过多过少、吞掉可能出现错误或异常问题等。另外承诺只接受首次 resolve(..)或 reject(..)...决议,承诺本身状态转变后不会再变,承诺所有通过 then(..)注册总是依次异步调用,承诺所有异常总会被捕获抛出。她,是一个可信任承诺。...需要异步延迟调用。至于为什么要延迟调用,后文会慢慢解读。这里有个重要知识点,回函数异步调用时机。...前者是将异步操作包装成 Thunk 函数,在 callback 交回执行权,后者是将异步操作包装成 Promise 对象,在 then 函数交回生成器执行权。

3.3K60
领券