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

TypeScript忽略Thunk未处理的拒绝(错误):操作必须是纯对象。使用自定义中间件进行异步操作

TypeScript忽略Thunk未处理的拒绝(错误):操作必须是纯对象。使用自定义中间件进行异步操作。

在使用Redux等状态管理库进行异步操作时,常常会遇到Thunk未处理的拒绝错误。这个错误通常是由于在Redux中使用了异步操作,但Thunk中间件未正确处理异步操作导致的。

解决这个问题的方法是使用自定义中间件来处理异步操作。自定义中间件可以通过拦截Redux的action,并在异步操作完成后再次派发一个新的action来解决这个问题。

以下是一个示例的自定义中间件代码:

代码语言:txt
复制
const asyncMiddleware = (store: any) => (next: any) => (action: any) => {
  if (typeof action === 'function') {
    return action(store.dispatch, store.getState);
  }
  return next(action);
};

export default asyncMiddleware;

在上述代码中,我们定义了一个名为asyncMiddleware的自定义中间件。它接受Redux store作为参数,并返回一个函数,该函数接受next和action作为参数。

在这个自定义中间件中,我们首先检查action的类型是否为函数。如果是函数类型,说明这是一个异步操作,我们就调用这个函数,并传入store.dispatch和store.getState作为参数。这样可以在异步操作完成后再次派发一个新的action。

如果action的类型不是函数,说明这是一个普通的action,我们就直接调用next(action)将其传递给下一个中间件或Redux的reducer进行处理。

使用这个自定义中间件的方法是,在创建Redux store时将其作为applyMiddleware的参数传入:

代码语言:txt
复制
import { createStore, applyMiddleware } from 'redux';
import asyncMiddleware from './asyncMiddleware';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(asyncMiddleware));

通过以上步骤,我们就可以解决TypeScript忽略Thunk未处理的拒绝错误,并且能够正常进行异步操作了。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 云函数(Serverless):腾讯云云函数是一种无服务器的事件驱动型计算服务,支持多种语言编写函数,无需管理服务器和运维,具有高可用、弹性伸缩等特点。了解更多:云函数产品介绍
  • 云数据库 MySQL 版:腾讯云数据库 MySQL 版是一种可扩展的云数据库服务,提供高性能、高可用、弹性伸缩的 MySQL 数据库解决方案。了解更多:云数据库 MySQL 版产品介绍
  • 云服务器(CVM):腾讯云云服务器(CVM)是一种可弹性伸缩的云计算服务,提供安全可靠的计算能力,支持多种操作系统和应用场景。了解更多:云服务器产品介绍
  • 腾讯云 CDN:腾讯云 CDN(内容分发网络)是一种分布式部署的加速网络,通过就近接入、智能调度和内容缓存等技术,提供快速、稳定的内容分发服务。了解更多:腾讯云 CDN 产品介绍
  • 腾讯云对象存储(COS):腾讯云对象存储(COS)是一种海量、安全、低成本的云存储服务,适用于图片、音视频、备份存档等各种场景。了解更多:腾讯云对象存储产品介绍
  • 腾讯云人工智能:腾讯云人工智能(AI)提供了丰富的人工智能服务,包括语音识别、图像识别、自然语言处理等,帮助开发者快速构建智能应用。了解更多:腾讯云人工智能产品介绍
  • 腾讯云物联网(IoT):腾讯云物联网(IoT)是一种连接设备与云端的服务,提供设备管理、数据采集、消息通信等功能,支持构建智能家居、智能工厂等物联网应用。了解更多:腾讯云物联网产品介绍
  • 腾讯云区块链:腾讯云区块链是一种安全、高效的区块链服务,提供区块链网络搭建、智能合约开发、链上数据存储等功能,适用于金融、供应链等领域。了解更多:腾讯云区块链产品介绍
  • 腾讯云视频处理:腾讯云视频处理是一种强大的视频处理服务,提供视频转码、视频截图、视频水印等功能,适用于在线教育、短视频等场景。了解更多:腾讯云视频处理产品介绍
  • 腾讯云音视频通信(TRTC):腾讯云音视频通信(TRTC)是一种实时音视频通信服务,提供高清、低延迟的音视频通信能力,适用于在线会议、直播等场景。了解更多:腾讯云音视频通信产品介绍
  • 腾讯云元宇宙:腾讯云元宇宙是一种虚拟的数字世界,提供虚拟现实、增强现实等技术,支持构建虚拟场景、虚拟人物等元宇宙应用。了解更多:腾讯云元宇宙产品介绍
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端react面试题(必备)2

useMemo 返回值)不能在useMemo⾥面写副作⽤逻辑处理,副作用逻辑处理放在 useEffect内进行处理自定义hook自定义 Hook 一个函数,其名称以 “use” 开头,函数内部可以调用其他...redux异步中间件其实有很多,当下主流异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...redux-observable额外范式,上⼿简单redux-thunk缺陷:样板代码过多: 与redux本身⼀样,通常⼀个请求需要⼤量代码,⽽且很多都是重复性质耦合严重: 异步操作与redux...时,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js

2.3K20

redux原来如此简单

state只读 state只读,能改变state唯一方式通过触发action来修改 使用函数执行修改 为了描述 action 如何改变 state tree , 你需要编写 reducers...reducers一些函数,接口当前state和action。只需要根据action,返回对应state。而且必须要有返回。...也是修改store唯一途径。 action本质上就是一个普通js对象,我们约定这个对象必须有一个字段type,来表示我们动作名称。一般我们会使用一个常量来表示type对应值。...Reducer作为函数,内部不建议使用任何有副作用操作,比如操作外部变量,任何导致相同输入但输出却不一致操作。...高级应用 异步action 我们也看到了,我们reducer只能做同步应用,如果我们需要在reducer,做一些延迟操作,可怎么办 社区已经有成熟类库做这件事件 npm install redux-thunk

73710

Redux异步解决方案之Redux-Thunk原理及源码解析

但是我们应用里面经常会有定时器,网络请求等等异步操作使用Redux-Thunk就可以发出异步action: function increment() { return { type:...Redux-Thunk前我们dispatchaction必须一个对象(plain object),使用了Redux-Thunk后,dispatch可以支持函数,这个函数会传入dispatch本身作为参数...而且他会将这些函数action“吃了”,所以不用担心你reducer会接收到奇怪函数参数。你reducer只会接收到对象action,无论直接发出还是前面那些异步函数发出。...我之前就告诉过你:只要使用了Redux Thunk,如果你想dispatch一个函数,而不是一个对象,这个中间件会自己帮你调用这个函数,而且会将dispatch作为第一个参数传进去。...在一些更复杂应用中,你可能会发现你异步控制流程通过thunk很难表达。比如,重试失败请求,使用token进行重新授权认证,或者在一步一步引导流程中,使用这种方式可能会很繁琐,而且容易出错。

3.5K51

深入学习 Redux 之中间件异步操作

一、什么中间件 ---- 如果我们框架作者,要添加功能,会在哪个环节添加: ① Reducer:函数,只承担计算 State 功能,不合适承担其他功能,而且理论上函数不能进行读写操作。...这时,就要使用中间件 redux-thunk。...因此,异步操作第一种解决方案就是,写出一个返回函数 Action Creator,然后使用 redux-thunk 中间件改造 store.dispatch。...另一种异步操作解决方案,就是让 Action Creator 返回一个 Promise 对象。 这就需要使用 redux-promise 中间件。...注意,createAction第二个参数必须一个 Promise 对象。 看一下 redux-promise 源码,就会明白它内部怎么操作

1.1K20

React与Redux开发实例精解

3.style属性值不能字符串而必须对象对象属性名使用驼峰命名法,如font-size为fontSize 4.注释写在{}内 5.数组会自动展开所有成员,但是如果数组或迭代器中每一项都是...函数,不要在reducer中做这些事情:修改传入参数;执行有副作用操作;调用非函数 九、Action创建函数与Redux Thunk中间件 1.Redux Thunk中间件可以让action创建函数先不返回...,正是事件驱动这个特性让JS可以执行异步代码,而不会阻塞后面程序运行 2.Promise处理异步优秀方案,它不仅可以通过链式操作帮助我们摆脱回调地狱,还可以在链式操作过程中任何时刻捕捉异常 3....Redux只能实现同步操作,但是可以通过Thunk中间件实现异步 十七、自定义Redux中间件 1.自定义Redux中间件只需要编写一个三层嵌套函数 2.一个异步请求通常需要编写三个action,分别在开始请求...,并在其回调中进行渲染即可 二十一、多页面下异步操作 1.redux-amrc封装了Redux中重复性异步操作,只需要将Promise和key值传给redux-amrc,它会完成接下来所有异步操作

2.1K20

单向数据流-从共享状态管理:fluxreduxvuex漫谈异步数据处理

比如 redux-thunk 或 redux-promise,分别是使用异步回调和 Promise 来解决异步 action 问题。...thunk就是简单action作为函数,在action进行异步操作,发出新action。...redux-saga优势 Redux 处理异步中间件 redux-thunk 和 redux-promise,当然 redux 异步中间件还有很多,他们可以处理大部分场景,这些中间件思想基本上都是把异步请求部分放在了...Action== - 状态更新计算:==reducer== - 限制:reducer必须函数,不支持异步 - 特性:支持中间件 ###### VUEX - 核心对象:store - 数据存储:state...,Vuex想法把同步和异步拆分开,异步操作想咋搞咋搞,但是不要干扰了同步操作

3.6K40

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

将 action 传到 store 我们需要传递 action 一个对象,它必须要有一个 type 值 例如,这里我们暴露了一个用于返回一个 action 对象方法 export const createIncrementAction...reducer 会根据 action 指示,对 state 进行对应操作,然后返回操作 state 如下,我们对接收 action 中传来 type 进行判断 export default...这时我们就需要引入中间件,在原生 redux 中暴露出 applyMiddleware 中间件执行函数,并引入 redux-thunk 中间件(需要手动下载) import thunk from 'redux-thunk...' 通过第二个参数传递下去就可以了 export default createStore(countReducer, applyMiddleware(thunk)) 注意:异步 action 不是必须要写...通过 action 执行 reducer 第三个原则 函数执行:每一个reducer 都是一个函数,不会有任何副作用,返回一个新 state,state 改变会触发 store 中 subscribe

46920

React 原理问题

类组件中优化手段 1、使用组件 PureComponent 作为基类 2、使用 React.memo 高阶函数包装组件 3、使用 shouldComponentUpdate 生命周期函数来自定义渲染逻辑...什么 suspense 组件? Suspense 让组件“等待”某个异步操作,直到该异步操作结束即可渲染 17. 为什么 JSX 中组件名要以大写字母开头?...数据可变性不同 Redux强调对象不可变性,不能直接操作状态对象。而是在原来状态对象基础上返回一个新状态对象,最后返回应用的上一个状态 Mobx可以直接使用新值更新状态对象 4....20. redux 有哪些异步中间件?...1、redux-thunk 源代码简短优雅,上手简单 2、redux-saga 借助 JS generator 来处理异步,避免了回调问题

2.5K00

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

将 action 传到 store 我们需要传递 action 一个对象,它必须要有一个 type 值 例如,这里我们暴露了一个用于返回一个 action 对象方法 export const createIncrementAction...reducer 会根据 action 指示,对 state 进行对应操作,然后返回操作 state 如下,我们对接收 action 中传来 type 进行判断 export default...这时我们就需要引入中间件,在原生 redux 中暴露出 applyMiddleware 中间件执行函数,并引入 redux-thunk 中间件(需要手动下载) import thunk from 'redux-thunk...' 通过第二个参数传递下去就可以了 export default createStore(countReducer, applyMiddleware(thunk)) 注意:异步 action 不是必须要写...通过 action 执行 reducer 第三个原则 函数执行:每一个reducer 都是一个函数,不会有任何副作用,返回一个新 state,state 改变会触发 store 中 subscribe

55920

2022前端二面react面试题

可以使用TypeScript写React应用吗?怎么操作?...react-redux 实现原理?通过 redux 和 react context 配合使用,并借助高阶函数,实现了 react-reduxsetState到底异步还是同步?...,该组件就是一个 '无状态组件(stateless component)',可以使用一个函数来创建这样组件。...里面的callback函数会在DOM更新完成后立即执行,但是会在浏览器进行任何绘制之前运行完成,阻塞了浏览器绘制.react 虚拟dom怎么实现图片首先说说为什么要使用Virturl DOM,因为操作真实...DOM耗费性能代价太高,所以react内部使用js实现了一套dom结构,在每次操作在和真实dom之前,使用实现好diff算法,对虚拟dom进行比较,递归找出有变化dom节点,然后对其进行更新操作

1.4K30

百度前端高频react面试题(持续更新中)_2023-02-27

redux异步中间件其实有很多,当下主流异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊像redux-saga...时,该action函数体会自动执行 store.dispatch(action) } (2)使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独 saga.js...当 ref 属性被用于一个自定义类组件时,ref 对象将接收该组件已挂载实例作为他 current。 当在父组件中需要访问子组件中 ref 时可使用传递 Refs 或回调 Refs。...它是为了创建展示组件,这种组件只负责根据传入props来展示,不涉及到state状态操作 组件不会被实例化,整体渲染性能得到提升,不能访问this对象,不能访问生命周期方法 (2)ES5 原生方式

2.3K30

深入Redux架构

(1)Reducer:函数,只承担计算 State 功能,不合适承担其他功能,也承担不了,因为理论上,函数不能进行读写操作。...有的中间件有次序要求,使用前要查一下文档。比如,logger就一定要放在最后,否则输出结果会不正确。 异步操作基本思路 理解了中间件以后,就可以处理异步操作了。...redux-thunk中间件 异步操作至少要送出两个 Action:用户触发第一个 Action,这个跟同步操作一样,没有问题;如何才能在操作结束时,系统自动送出第二个 Action 呢?...这时,就要使用中间件redux-thunk。...因此,异步操作第一种解决方案就是,写出一个返回函数 Action Creator,然后使用redux-thunk中间件改造store.dispatch。

2.2K60

源码共读-Redux

Redux优秀状态管理库,本节我们学习一下Redux源码,由于Redux源码TypeScript,为了方便学习,本节去掉一些类型定义,转化为JavaScript来展示,另外对于错误信息我们这里就先不处理了...,防止在分发过程中出现不合理操作。...上面redux-logger中间件简单实现,常用中间件还有redux-thunk,核心代码如下: const thunk = ({ dispatch, getState }) => next =>...逻辑也很简单,通过对store解构获取dispatch和getState函数,如果action函数则调用action,否则调用next(action)进行下一个中间件。...在action函数中可以通过dispatch来触发action,哪怕是在异步回调中,所以redux-thunk通常用来处理异步操作

8010

2021高频前端面试题汇总之React篇

但是在⼀定规模项⽬中,上述⽅法很难进⾏异步管理,通常情况下我们会借助redux异步中间件进⾏异步处理。...redux异步中间件其实有很多,当下主流异步中间件有两种redux-thunk、redux-saga。...(1)使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊像redux-saga...或者redux-observable额外范式,上⼿简单 redux-thunk缺陷: 样板代码过多: 与redux本身⼀样,通常⼀个请求需要⼤量代码,⽽且很多都是重复性质 耦合严重: 异步操作与redux...时,该action函数体会自动执行 store.dispatch(action) } 复制代码 (2)使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独

2K00

Redux原理分析以及使用详解(TS && JS)

很多人认为redux必须要结合React使用,其实并不是的,Redux JavaScript 状态容器,只要你项目中使用到了状态,并且状态十分复杂,那么你就可以使用Redux管理你项目状态,它可以使用在...,派发给 redux Store action 对象,会被 Store 上多个中间件依次处理,值得注意这些中间件会按照指定顺序一次处理传入 action,只有排在前面的中间件完成任务之后,...,在函数内进行异步操作。...redux-saga将react中同步操作异步操作区分开来,以便于后期管理与维护 ,redux- saga相当于在Redux原有数据流中多了一层,通过对Action进行监听,从而捕获到监听Action...,但是,这整个Action方法,返回一个async,async其实本质也就是promise对象,那么又是一个异步对象,所以它外部不会等待,当代码执行到await这块, 因为需要时间来调用接口,所以会跳出去

4K30

React saga_react获取子组件ref

redux-saga简介 Redux-sagaRedux一个中间件,主要集中处理react架构中异步处理工作,被定义为generator(ES6)形式,采用监听形式进行工作。...,也执行了下面代码,进行logout监听操作。...---- 最近将项目中redux中间件,从redux-thunk替换成了redux-saga,做个笔记总结一下redux-saga使用心得,阅读本文需要了解什么redux,redux中间件用处是什么...遵循函数式编程规则,上述数据流中,action一个原始js对象(plain object)且reducer一个函数,对于同步且没有副作用操作,上述数据流起到可以管理数据,从而控制视图层更新目的...控制执行generator,在redux-saga中action原始js对象,把所有的异步副作用操作放在了saga函数里面。

4.5K30

高频React面试题及详解

: 虚拟DOMdiff和patch都是在一次更新中自动进行,我们无需手动操作DOM,极大提高开发效率 跨平台: 虚拟DOM本质上JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作...保存数据,数据变化后自动处理响应操作 redux使用不可变状态,这意味着状态只读,不能直接去修改它,而是应该返回一个新状态,同时使用函数;mobx中状态可变,可以直接对其进行修改 mobx...相对来说比较简单,在其中有很多抽象,mobx更多使用面向对象编程思维;redux会比较复杂,因为其中函数式编程思想掌握起来不是那么容易,同时需要借助一系列中间件来处理异步和副作用 mobx中有更多抽象和封装...但是在一定规模项目中,上述方法很难进行异步管理,通常情况下我们会借助redux异步中间件进行异步处理. redux异步中间件其实有很多,但是当下主流异步中间件只有两种redux-thunk、...redux-saga,当然redux- observable可能也有资格占据一席之地,其余异步中间件不管社区活跃度还是npm下载量都比较差了. redux异步中间件之间优劣?

2.4K40

React之redux学习日志(reduxreact-reduxredux-saga)

使用函数执行修改:reducer中,应该返回一个函数,函数接受先前 state和action, 然后返回一个新 state 3..../action-type' // 创建一个默认仓库,一般提出来会更加清晰 const defaultState = { userInfo: {} } // reducer必须一个函数 const...当我们需要执行一些异步操作时,由于action中只能返回一个对象,从而需要借助一些中间件来达到目的,redux-thunk 和 redux-saga常见两种中间件。   ...redux-thunk 主要是使action能够返回一个函数而达到目的,这样导致了action函数变得复杂   redux-saga 可以将异步操作单独分离出来封装到某些模块,这样保证action函数更加干净...redux-saga中间件使用,若有错误请各路大佬指出加以改正和学习 智者说话,是因为他们有话要说;愚者说话,则是因为他们想说。

54330
领券