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

为什么我的Redux Thunk操作返回的结果是一个承诺?

Redux Thunk 是一个 Redux 中间件,它允许我们在 Redux 的 action 创建函数中编写异步的逻辑。当你的 Redux Thunk 操作返回的结果是一个承诺(Promise)时,有以下几个原因:

  1. 异步操作:Redux Thunk 允许我们在 action 创建函数中执行异步操作,如发送网络请求或者从数据库获取数据。由于这些操作是异步的,无法立即获取结果,因此需要使用 Promise 来处理异步操作的结果。
  2. 副作用管理:Redux 的设计理念是纯函数式编程,即 action 必须是纯粹的数据对象,不应该包含副作用。但在实际应用中,很多情况下需要处理异步操作和副作用。Redux Thunk 提供了一个中间件,用于处理副作用,并将异步操作结果封装在 Promise 中返回给 Redux。
  3. 状态更新:Redux Thunk 允许我们在异步操作完成后,再次派发其他的 action,用于更新 Redux 的状态。当异步操作返回的结果是一个承诺时,我们可以使用 Promise 的 then() 方法,在异步操作完成后继续派发其他的 action,以实现状态的更新。

总结起来,Redux Thunk 返回结果为 Promise 是为了处理异步操作、管理副作用并实现状态的更新。同时,通过使用 Redux Thunk,我们可以更方便地编写复杂的异步逻辑,并将其集成到 Redux 的流程中。

在腾讯云相关产品中,没有直接对应 Redux Thunk 的产品。但腾讯云提供了云开发服务,如云函数 SCF(Serverless Cloud Function),可以用于编写无服务器函数来处理类似 Redux Thunk 的异步逻辑。您可以参考腾讯云云函数 SCF 的文档了解更多信息:腾讯云云函数 SCF

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

相关·内容

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

但是我们的应用里面经常会有定时器,网络请求等等异步操作,使用Redux-Thunk就可以发出异步的action: function increment() { return { type:...在继续深入源码前,我们先来思考一个问题,为什么我们要用Redux-Thunk,不用它行不行?...我之前就告诉过你:只要使用了Redux Thunk,如果你想dispatch一个函数,而不是一个纯对象,这个中间件会自己帮你调用这个函数,而且会将dispatch作为第一个参数传进去。...这就是为什么你可以在thunk中返回一个Promise并且等他完成: dispatch(someThunkReturningPromise()).then(...)...} } 复制代码 处理thunk 根据我们前面讲的,thunk是一个函数,接收dispatch getState两个参数,所以我们应该将thunk拿出来运行,然后给他传入这两个参数,再将它的返回值直接返回就行

3.6K51
  • 为什么 Vuex 的 mutation 和 Redux 的 reducer 中不能做异步操作?

    (() => { state.count++ }) } } 现在想象,我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。...Redux 先从Redux的设计层面来解释为什么Reducer必须是纯函数 如果你经常用React+Redux开发,那么就应该了解Redux的设计初衷。...Redux的设计参考了Flux的模式,作者希望以此来实现时间旅行,保存应用的历史状态,实现应用状态的可预测。...所以整个Redux都是函数式编程的范式,要求reducer是纯函数也是自然而然的事情,使用纯函数才能保证相同的输入得到相同的输入,保证状态的可预测。...所以Redux有三大原则: 单一数据源,也就是state state 是只读,Redux并没有暴露出直接修改state的接口,必须通过action来触发修改 使用纯函数来修改state,reducer

    2.8K30

    Redux Toolkit

    它最初的创建是为了帮助解决关于 Redux 的三个常见问题: “配置 Redux 存储太复杂了” “我必须添加很多包才能让 Redux 做任何有用的事情” “Redux 需要太多样板代码” 我们无法解决所有用例...Redux Toolkit 还包括一个强大的数据获取和缓存功能,我们称之为“RTK Query”。它作为一组单独的入口点包含在包中。它是可选的,但可以消除您自己手写数据获取逻辑的需要。...无论您是设置第一个项目的全新 Redux 用户,还是想要简化现有应用程序的经验丰富的用户,Redux Toolkit都可以帮助您改进您的 Redux 代码。...它可以自动组合你的 slice reducer,添加你提供的任何 Redux 中间件,redux-thunk默认包含,并启用 Redux DevTools Extension。...createAsyncThunk: 接受一个动作类型字符串和一个返回承诺的函数,并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的 thunk import { createAsyncThunk

    13010

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

    经典的异步 Action 解决方案redux-thunk 在针对 Redux 源码主流程的分析中,我们不难看出这样一个规律:Redux 源码中只有同步操作,也就是说当我们 dispatch action...action,注意这个 action 是一个函数 store.dispatch(payMoney(payInfo)); 这里我尝试用 redux-thunk 模拟了一个付款请求的发起 响应过程。...redux-thunk 的源码其实非常简洁,我第一次接触时还是在 2016 年,这么多年过去了,很多事情都变了,唯一不变的是 redux-thunk,它仍然那么好懂。...若 action 是一个函数,那么 redux-thunk 就会执行它并且返回执行结果;若 action 不是一个函数,那么它就不是 redux-thunk 的处理目标,直接调用 next,告诉 Redux...为什么我们的应用需要中间件呢?这里,我就以 Redux 中间件机制为例,简单和你聊聊中间件背后的“面向切面”编程思想。

    45530

    Redux异步解决方案 1. Redux-Thunk中间件

    简单介绍一下thunk,这是一个中间件,是解决redux异步问题产生的。...我们都知道,在使用redux的时候,通过dispatch一个action 发生到reducer 然后传递给store修改状态 一系列都是同步的,那如果说我dispatch一个action 这个action...可以将 thunk 看做 store 的 dispatch() 方法的封装器;我们可以使用 thunk action creator 派遣函数或 Promise,而不是返回 action 对象。...) // 应用thunk中间件 ); // 在对dispatch函数进行映射时 action creator 可以直接返回一个函数 不用直接返回action 这使得里面可以写异步操作 先去请求接口 在去...dispatch一个action到reducer // 当应用了thunk中间件时 action creator返回的函数都会默认传递一个dispatch的方法 然后再去dispatch action

    1.3K20

    react知识总结_六年级教学工作总结个人

    大家好,又见面了,我是你们的朋友全栈君。 简介 这次要总结的是对 store 和 reducer 的拓展,比如发送异步的 action 操作,还有一个就是对多个 reducer 的管理。...,这个函数可以接受两个参数,一个是 dispatch ,另一个是 getState ,然后在里面进行异步操作,我这里设置了 2秒 然后添加了一个用户,点击之后,过了 2秒 我的用户才会被添加进去,而页面也是等到...这种异步思路就是使用 Action Creator 返回一个函数,然后使用 redux-thunk 让 dispatch 能够接受一个函数作为参数。...logger) // 按照严格的循序 ); 上一种方法是使用 Action Creator 返回函数来操作异步,使用 redux-promise 可以让它返回一个 promise 对象,可以使用...让它能够返回一个 使用 promise ,接着我们调用 使用 deleteUserData 函数时就可以执行 then 的操作。

    66520

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

    某个组件的状态,需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态 1.2、为什么要用Redux 在React中,数据在组件中是单向流动的,这是react...reducer会根据传入的action的type值对state进行不同的操作,然后返回一个新的state,而不是在原有state的基础上进行修改,但是如果遇到了未知的(不匹配的)action,就会返回原有的...从简单的 react-thunk 到 redux-promise 再到 redux-saga等等,都代表这各自解决redux异步流管理问题的方案 4.1 、redux-thunk redux-thunk...正因为这个action creator可以返回一个函数,那么就可以在这个函数中执行一些异步的操作,就比如网络请求。...从同步异步的角度来说这个问题:想让异步变成类似同步的操作我们应该怎么办,大家想到的肯定是async/await,阻塞代码,我开始一直陷入一个误区,我内部的确造成了阻塞,等到data有值了,才会dispatch

    4.5K30

    redux-thunk引发的redux middleware和store enhancer浅析

    本文作者:IMWeb EnjoyChan 原文出处:IMWeb社区 未经同意,禁止转载 项目中使用redux-thunk来解决异步请求的问题,但是为什么要引入redux-thunk来解决异步请求问题...redux-thunk, 或者说redux-thunk可以解决什么场景问题;来看下面这个场景,我们上面那份代码可能被多次调用,根据传入参数来执行,于是我们封装一个函数: // 2 function encapsulateFunc...action creator,不需要关心同步还是异步,返回的是对象还是函数,只需要关注传入的参数; 观察ecncapsulateFunc,我们会发现它返回了一个函数,参数传入dispatch,我们称ecncapsulateFunc...,封装设计更合理,当然redux-thunk是在我们需要的时候才引入,如果我们的实际项目明明可以简单解决,就不需要引入redux-thunk了。...], [enhancer]) 第三个参数enhancer可选,也就是说applyMiddleware方法返回了一个enhancer,这里的enhancer就是store enhancer, 所谓的enhancer

    1.1K20

    React saga_react获取子组件ref

    大家好,又见面了,我是你们的朋友全栈君。...redux-thunk处理副作用的缺点 redux-saga写一个hellosaga redux-saga的使用技术细节 redux-saga实现一个登陆和列表样例 ---- 1.redux-thunk...比如下面是一个获取商品列表的异步操作所对应的action: export default ()=>(dispatch)=>{ fetch('/api/goodList',{ //fecth返回的是一个...action不易维护的原因: action的形式不统一 就是异步操作太为分散,分散在了各个action中 2.redux-saga写一个hellosaga 跟redux-thunk,redux-saga...(plain object) 对比redux-thunk我们发现,redux-saga中监听到了原始js对象action,并不会马上执行副作用操作,会先通过Effect方法将其转化成一个描述对象,然后再将描述对象

    4.5K30

    造一个 redux-thunk 轮子

    redux-thunk 不就是那个只有 14 行代码的轮子嘛?我一行就能写出来还要你来教我做事? 不错,redux-thunk 是一个非常小的库,不到 5 分钟就能理解并造出来。...但是今天我并不想从 “怎么造” 这个角度来讲这个轮子,而是想从 “为什么” 这个角度来聊一聊这个轮子的是怎么出现的。...不过,我觉得这是从结果出发找造这个轮子的原因,并不能从需求层面解释这个中间件到底解决了什么问题。 本文希望从解决问题的角度来推导 redux-thunk 诞生的原因。...doSomthing(我的参数) // dispatch 修改值 dispatch(...) } 为了下次懒得再一次解释这样的函数结构,干脆用一个词这概括它,就叫它 "thunk" 吧。...函数 发现直接赋值是个很笨的行为,比较高级的是使用中间件来改写 dispatch 函数 最后,我们做了一个中间件出来,就叫做 redux-thunk 总结 最后来回答一些我在 redux 社区里看到的一些问题

    75030

    前端react面试题(必备)2

    )注册监听器;通过 subscribe(listener)返回的函数注销监听器React中的props为什么是只读的?...为什么 React 要用 JSX?JSX 是一个 JavaScript 的语法扩展,或者说是一个类似于 XML 的 ECMAScript 语法扩展。它本身没有太多的语法定义,也不期望引入更多的标准。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...redux-observable额外的范式,上⼿简单redux-thunk缺陷:样板代码过多: 与redux本身⼀样,通常⼀个请求需要⼤量的代码,⽽且很多都是重复性质的耦合严重: 异步操作与redux的...(thunk));const store = createStore(reducer, enhancer);export default store;添加一个返回函数的actionCreator,将异步请求逻辑放在里面

    2.3K20

    redux(应用的状态管理器)有那么难吗?没有!

    但是如果是异步操作,比如一个网络请求,我们需要等到请求返回之后才会返回action,怎么办呢?...import thunk from 'redux-thunk'; import { rootReducer } from '....以及如何重构reducer的代码?可以移步另一篇博客:如何最佳实践的设计reducer。 那么,回到最初的话题,引入Redux到我们的应用中,到底有什么好处?我们为什么需要一个专门的状态管理器?...另外,Redux还让前后端彻底分离变成了可能,这一点也有极大的意义。 Redux的数据流 Redux通过一些限制告诉你:数据只能保存在我这儿,别想太分散!想要修改数据?...告诉我一个带新数据的action,我会通过reducer自动修改,然后返回修改后的数据给你! 是的,redux很想“数据库”,数据被集中存储,并且只能通过“预先定义的action操作”来修改。

    3.4K10

    redux-saga_pub culture

    在最初的调研中redux-thunk是首先考虑的,redux-thunk是在action作用到reducer之前触发一些业务操作。刚好起到控制层的作用。...但是,马上了解到了redux-sage,因为大家都在对比两者。本文并不会做对比,在文章的最后会简单介绍为什么选了Saga而不是thunk的原因,仅供参考。...拿到后端返回状态 (promise so easy…) 隐藏提示信息 (这个有点难度,不过难不倒我,我给组建加一个控制属性) 更新redux store (dispatch咯。。。)...call方法 call有些类似Javascript中的call函数, 不同的是它可以接受一个返回promise的函数,使用生成器的方式来把异步变同步。...这句话使我决定了尝试用saga或thunk来实践把前端分层的设想。

    1.4K10

    应用connected-react-router和redux-thunk打通react路由孤立

    fetchPosts 代码如下: 操作结束后,再发出一个 Action,触发 State 更新为“操作结束”,View 再次重新渲染redux-thunk异步操作至少送出两个 Action,第一个 Action...Action Creator,执行返回一个函数,该函数执行时dispatch一个 action,表明马上要进行异步操作;异步执行完成后,根据请求结果的不同,分别dispatch不同的 action 将异步操作的结果返回回来...这里需要说明几点: fetchPosts返回了一个函数,而普通的 Action Creator 默认返回一个对象。...在返回的函数之中,先发出一个 store.dispatch({type: SET_DEMO_DATA.PENDING}),表示异步操作开始。...针对以上操作尝试梳理了一个简单demo大家可以查看github。 如果你有任何想法欢迎直接「留言」与我交流,那将是我进步的动力!

    2.4K00
    领券