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

Redux Saga中的Typescript :属性'then‘在类型'void’上不存在。TS2339

Redux Saga是一个用于管理应用程序中异步行为的库。它结合了Redux和Generator函数的概念,使得处理复杂的异步流程变得简单而直观。

在Redux Saga中,Typescript的类型错误'TS2339'是由于尝试在类型为'void'的属性上使用属性'then'引起的。这通常表示您在尝试在一个没有返回Promise的地方使用.then()方法,因为.then()是Promise的方法。

要解决这个问题,您可以检查您的代码中的异步操作是否返回了一个Promise对象。如果异步操作返回了Promise,您可以确保在其结果上使用.then()方法。否则,您可能需要重新考虑如何处理这个异步操作,以便适应Redux Saga的要求。

下面是一个示例代码,演示如何在Redux Saga中处理异步操作,并使用Typescript进行类型检查:

代码语言:txt
复制
import { call, put, takeEvery } from 'redux-saga/effects';
import { fetchData } from './api';

// 定义一个action类型
const FETCH_DATA = 'FETCH_DATA';

// 定义一个异步操作的Saga
function* fetchDataSaga() {
  try {
    // 调用异步操作的API
    const data = yield call(fetchData);

    // 使用put效果将数据存储到Redux Store中
    yield put({ type: 'FETCH_DATA_SUCCESS', payload: data });
  } catch (error) {
    // 处理错误
    yield put({ type: 'FETCH_DATA_ERROR', error: error.message });
  }
}

// 监听FETCH_DATA action,并在触发时执行fetchDataSaga
function* watchFetchData() {
  yield takeEvery(FETCH_DATA, fetchDataSaga);
}

// 导出根Saga
export default function* rootSaga() {
  yield all([
    watchFetchData(),
    // 添加其他的Saga
  ]);
}

在上面的示例中,fetchDataSaga函数是一个Generator函数,用于处理FETCH_DATA action的异步操作。它使用call效果调用了一个名为fetchData的异步操作API,并使用put效果将返回的数据存储到Redux Store中。

通过使用Generator函数和Redux Saga的效果,我们可以以一种简洁和可测试的方式处理复杂的异步流程。同时,Typescript的类型检查能够帮助我们在编译时捕获类型错误,确保代码的正确性。

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

  • 云函数(Serverless):https://cloud.tencent.com/product/scf
  • 云数据库MongoDB:https://cloud.tencent.com/product/tcb-dbm
  • 云存储COS:https://cloud.tencent.com/product/cos
  • 人工智能平台PAI:https://cloud.tencent.com/product/pai
  • 移动应用开发平台MAD:https://cloud.tencent.com/product/mad
  • 物联网开发平台IoT Explorer:https://cloud.tencent.com/product/iothub
  • 区块链服务BaaS:https://cloud.tencent.com/product/baas
  • 元宇宙技术服务:https://cloud.tencent.com/solution/virtual-universe

这些腾讯云产品可以帮助您构建和部署具有高可靠性和可伸缩性的云应用程序,并提供丰富的功能和服务来满足不同领域的需求。

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

相关·内容

深度讲解TS:这样学TS,迟早进大厂【11】:类型断言

当我们引用一个在此类型不存在属性或方法时,就会报错: const foo: number = 1; foo.length = 1; // index.ts:2:5 - error TS2339:...上面的例子,数字类型变量 foo 是没有 length 属性,故 TypeScript 给出了相应错误提示。 这种错误提示显然是非常有用。...上面的例子,我们需要将 window 添加一个属性 foo,但 TypeScript 编译时会报错,提示我们 window 不存在 foo 属性。...此时我们可以使用 as any 临时将 window 断言为 any 类型: (window as any).foo = 1; any 类型变量,访问任何属性都是允许。...,而实际 TypeScript 判断类型兼容性时,比这种情况复杂很多,详细请参考[类型兼容性(TODO)][]章节。

1.2K20
  • 前端react面试题(必备)2

    但是⼀定规模项⽬,上述⽅法很难进⾏异步流管理,通常情况下我们会借助redux异步中间件进⾏异步处理。...redux异步流中间件其实有很多,当下主流异步中间件有两种redux-thunk、redux-saga。...redux-observable额外范式,⼿简单redux-thunk缺陷:样板代码过多: 与redux本身⼀样,通常⼀个请求需要⼤量代码,⽽且很多都是重复性质耦合严重: 异步操作与redux...和⼀整套思想体积庞⼤: 体积略⼤,代码近2000⾏,min版25KB左右功能过剩: 实际并发控制等功能很难⽤到,但是我们依然需要引⼊这些代码ts⽀持不友好: yield⽆法返回TS类型redux-saga...这样 React更新DOM时就不需要考虑如何处理附着DOM事件监听器,最终达到优化性能目的。

    2.3K20

    TypeScript遭库开发者嫌弃:类型简直是万恶之源

    今年《2022 前端开发者现状报告》显示, 84% 受访者表示使用过 TypeScript,可见这门语言已被越来越多前端开发者所接受。...然而,本周 redux-saga 工程师 Eric Bower 却在一篇博客中提出了不同意见,他站在库开发者角度,直言“我很讨厌 TypeScript”,并列举了五点理由。...redux-saga 是一个 库(Library),具体来说,大部分情况下,它是以 Redux 中间件形式而存在,主要是为了更优雅地管理 Redux 应用程序副作用(Side Effects)。...太过复杂 我跟 redux 打过不少交道,redux-toolkit 确实是个很棒库,开发者可以用它查看实际代码库类型是如何正确完成。...我就帮忙维护过 redux-saga,项目近期发布 PR 和 issue 主要就集中类型身上。 我发现相较于编写库代码,我花在类型调整时间要多得多。

    75710

    React组件设计实践总结05 - 状态管理

    所以说 Redux 没那么简单, 当然 80% Web 应用也不需要这么复杂. 五,不方便 Typescript 类型化。...不管是 redux 还是二次封装框架都不是特别方便 Typescript 进行类型推导,尤其是加入各种扩展后。...你可能需要显式注解很多数据类型 扩展: react-redux-typescript-guide, rematch & Typescript 六,不是分形(Fractal) 没有看到@杨剑锋这条知乎回答之前我也不知道什么叫分形...个人认为不支持分形工程还不至于成为 Redux 痛点,我们可以通过‘模块化’将 Redux 拆分为多个模块,多个 Container 中进行独立维护,从某种程度上是否就是分形?...比如 antd Table 组件就不认 mobx 数组, 需要传入到组件之间使用 slice 进行转换 向一个已存在 observable 对象添加属性不会被自动捕获 MV* 只是 Mobx

    2.1K31

    深度讲解TS:这样学TS,迟早进大厂【13】:内置对象

    TS系列地址: 21篇文章带你玩转ts 内置对象 JavaScript 中有很多内置对象,它们可以直接在 TypeScript 当做定义好了类型。...内置对象是指根据标准全局作用域(Global)存在对象。这里标准是指 ECMAScript 和其他环境(比如 DOM)标准。...TypeScript 核心库定义文件§ TypeScript 核心库定义文件定义了所有浏览器环境需要用到类型,并且是预置 TypeScript 。...当你使用一些常用方法时候,TypeScript 实际已经帮你做了很多类型判断工作了,比如: Math.pow(10, '2'); // index.ts(1,14): error TS2345...: boolean): void; } 所以 e 被推断成了 MouseEvent,而 MouseEvent 是没有 targetCurrent 属性,所以报错了。

    67030

    一天梳理完react面试高频题

    Home // Home是一种特殊类型 当它 to属性与当前地址匹配时,可以将其定义为"活跃"。...单向数据流模式,所以props是从父组件传入子组件数据Redux 异步请求怎么处理可以 componentDidmount 中直接进⾏请求⽆须借助redux。...但是⼀定规模项⽬,上述⽅法很难进⾏异步流管理,通常情况下我们会借助redux异步中间件进⾏异步处理。...和⼀整套思想体积庞⼤: 体积略⼤,代码近2000⾏,min版25KB左右功能过剩: 实际并发控制等功能很难⽤到,但是我们依然需要引⼊这些代码ts⽀持不友好: yield⽆法返回TS类型redux-saga...React Fiber 目标是提高其动画、布局、手势、暂停、中止或重用等方面的适用性,并为不同类型更新分配优先级,以及新并发原语。

    4.1K20

    2023再谈前端状态管理

    当然这样并不优雅,实际项目中我们通常使用类似redux-thunk、redux-saga这些中间件来支持处理异步。...redux支持回溯,调试也更方便; 有成熟开发调试工具 redux devtools。...良好 TypeScript 支持:提供完整 TypeScript 类型定义, VS Code 能获得完整类型检查和推断。 icestore 灵感来自于 rematch和 constate。...Mobx学习成本更低,没有全家桶。 Mobx更新state深层嵌套属性时更方便,直接赋值就好了,redux则需要更新所有途经层级引用(当然搭配immer也不麻烦)。...低 低 Typescript友好 友好 不友好,没有清晰依赖关系,类型支持很差 友好 友好 友好 友好 友好 友好 友好 状态拆分 react/toolkit createSlice 支持 支持 支持

    91010

    高级前端react面试题总结

    constructor被调用是组件准备要挂载最开始,此时组件尚未挂载到网页。...componentDidMount方法代码,是组件已经完全挂载到网页才会调用被执行,所以可以保证数据加载。此外,在这方法调用setState方法,会触发重新渲染。...元素element可以属性props包含其他元素(译注:用于形成元素树)。创建一个React元素element成本很低。元素element创建之后是不可变。...和⼀整套思想体积庞⼤: 体积略⼤,代码近2000⾏,min版25KB左右功能过剩: 实际并发控制等功能很难⽤到,但是我们依然需要引⼊这些代码ts⽀持不友好: yield⽆法返回TS类型redux-saga...可以这样:把Radio看做子组件,RadioGroup看做父组件,name属性RadioGroup这个父组件设置。

    4.1K40

    聊聊TypeScript类型声明那些最佳实践

    然而在改造过程,逐步意识到TypeScript这门语言艺术魅力 人狠话不多,下面我们先来聊一下 TypeScript 类型声明相关技巧: 先了解TypeScript类型系统 TypeScript...是 JavaScript 超集,它提供了 JavaScript所有功能,并在这些功能基础附加一层:TypeScript类型系统 什么TypeScript类型系统呢?...团队协作,为了更好可维护性, 我们应该尽可能地践行以下3条原则: 泛型优于联合类型 举个官方示例代码做比较: interface Bird { fly(): void layEggs()...举个简单case,我们使用Redux时候,往往需要给Redux每个模块State设置初始值。...// 导出数据类型可以在其他地方使用 这个技巧可以让我们非常坦然地 “偷懒”,同时也能减少一些Redux类型声明,比较实用 巧用内置工具函数优于重复声明 Typescript提供内置工具函数有如下几个

    1.5K20

    react全家桶包括哪些_react 自定义组件

    4.1 JavaScript纯函数 4.1.1 定义 确定输入,一定会产生确定输出 函数执行过程,不能产生副作用 4.1.2 分析 为什么纯函数函数式编程中非常重要呢?...Redux 三大核心概念 4.2.1 store 单一数据源 整个应用程序state被存储一颗object tree,并且这个object tree只存储一个 store Redux并没有强制让我们不能创建多个...(即 state 对象)转换为 UI 组件标签属性 mapDispatchToProps(obiect): 将分发 action 函数转换为 UI 组件标签属性 Counter: UI 组件 //...处理 redux 异步操作 npm install redux-saga // store.js import { createStore, applyMiddleware } from 'redux...这个映射关系就是pages配置相关组件都会自动生成对应路径 默认page/index.js是页面的默认路径 页面跳转 5.4 样式 方式一:全局样式引入 方式二:module.css

    5.8K20

    前端三大主流框架区别(三)

    angular全面支持typescript语法,typescript不仅包含es6语法,也包括一些新语法, 最重要一点是它增加了类型规则,这让代码可读性和可维护性大大提高,它也可以让有java...而且它类型文件单独存在,开发中使用任何IDE都可以检查代码。可以使用自带格式化功能,让开发过程代码更整洁。 1.3....而且js写html时就要避免两者出现相同关键字,比如class,jsx中就要写成className,还要是驼峰式写法 3、使用reduxredux处理数据流时候是使用saga语法,开发人员要去学习...saga写法,然后saga异步操作和同步操作是分开在两个函数写,要在组件本身写一次,数据流到父组件时还要再写一遍,写法要更复杂,如果想简化它,就要用一个前端应用框架-DVA,就还是通过加东西来增加开发效率...2、vuex,完成了redux功能且写法更加便捷,不再需要dva这种框架去帮他简便写法。 3、vue体积是三个框架中最小,加上它处理机制,非大型项目的对比,它性能是最高

    78510

    全网最全,最详细,最友好 Typescript 新手教程

    TypeScript告诉你函数参数有any类型,如果你记得的话,它可以是TypeScript任何类型。我们需要在TypeScript代码添加适当类型注释。 等等,到底什么是型?...url"属性不存在类型字符串TypeScript。...看看我们代码,我们可以想到一个简单“模型”,命名为Link,对象形状应该符合以下模式: 它必须有一个类型为stringurl属性 TypeScript,你可以用一个接口来定义这个“模型”,就像这样...那么接口和类型之间应该使用什么呢?我更喜欢复杂对象接口。TypeScript文档也建议了一种方法: 因为软件理想属性是对扩展开放,所以如果可能的话,应该始终类型别名使用接口。...void作为函数返回值很有用…不要返回任何东西。 输出到控制台函数实际不返回任何东西。

    6.1K40

    社招前端一面react面试题汇总

    ,而是给react用,大概作用就是给每一个reactNode添加一个身份标识,方便react进行识别,重渲染过程,如果key一样,若组件属性有所变化,则react只更新组件对应属性;没有变化则不更新...redux-saga优点:异步解耦:异步操作被被转移到单独saga.js,不再是掺杂action.js或component.js;action摆脱thunk function: dispatch参数依然是.../catch语法直接捕获处理;功能强⼤:redux-saga提供了⼤量Saga辅助函数和Effect创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤;灵活:redux-saga可以将多个Saga...redux-saga缺陷:额外学习成本:redux-saga不仅在使⽤难以理解generator function,⽽且有数⼗个API,学习成本远超reduxthunk,最重要是你额外学习成本是只服务于这个库...redux-observable缺陷:学习成本奇⾼:如果你不会rxjs,则需要额外学习两个复杂库;社区⼀般:redux-observable下载量只有redux-saga1/5,社区也不够活跃,复杂异步流中间件这个层

    3K20

    高频React面试题及详解

    : 虚拟DOMdiff和patch都是一次更新自动进行,我们无需手动操作DOM,极大提高开发效率 跨平台: 虚拟DOM本质是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作...可以看到,整个流程数据都是单向流动,这种方式保证了流程清晰。 redux原理详解 react-redux是如何工作?...功能孱弱: 有一些实际开发中常用功能需要自己进行封装 redux-saga优点: 异步解耦: 异步操作被被转移到单独 saga.js ,不再是掺杂 action.js 或 component.js...,但是我们依然需要引入这些代码 ts支持不友好: yield无法返回TS类型 redux-observable优点: 功能最强: 由于背靠rxjs这个强大响应式编程库,借助rxjs操作符,你可以几乎做任何你能想到异步处理...缺陷: 学习成本奇高: 如果你不会rxjs,则需要额外学习两个复杂库 社区一般: redux-observable下载量只有redux-saga1/5,社区也不够活跃,复杂异步流中间件这个层面redux-saga

    2.4K40

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

    Redux 异步请求怎么处理 可以 componentDidmount 中直接进⾏请求⽆须借助redux。...功能强⼤: redux-saga提供了⼤量Saga 辅助函数和Effect 创建器供开发者使⽤,开发者⽆须封装或者简单封装即可使⽤ 灵活: redux-saga可以将多个Saga可以串⾏/并⾏组合起来...② 组件属性类型propTypes及其默认props属性defaultProps配置不同 React.createClass创建组件时,有关组件props属性类型及组件默认属性会作为组件实例属性来配置...,其状态state是constructor像初始化组件属性一样声明。...componentDidMount方法代码,是组件已经完全挂载到网页才会调用被执行,所以可以保证数据加载。此外,在这方法调用setState方法,会触发重新渲染。

    2.3K30

    redux-saga学习

    redux-saga redux-saga是一个用于管理redux应用异步操作中间件,redux-saga通过创建sagas将所有异步操作逻辑收集一个地方集中处理,可以用来代替redux-thunk...发起异步调用(副作用) 为了模拟现实计算,添加另外一个按钮,用于点击 1 秒后增加计数 1. UI 组件 Counter.js 添加一个额外按钮和一个回调 onIncrementAsync...takeEvery(pattern, saga, …args) 发起(dispatch)到 Store 并且匹配 pattern 每一个 action 派生一个 saga。...与所有 take Effect 阻塞 Saga 都将获得 END 对象规则相反。...Task 一个 task 就像是一个在后台运行进程。基于 redux-saga 应用程序,可以同时运行多个 task。

    2.7K10
    领券