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

等待从redux-thunk调度返回的值,而不是使用状态

在前端开发中,redux-thunk是一个常用的中间件,用于处理异步操作。它允许我们在Redux应用中派发函数而不仅仅是普通的action对象。当我们需要等待从redux-thunk调度返回的值时,可以采取以下步骤:

  1. 在Redux中使用redux-thunk中间件:首先,确保你的项目中已经安装了redux-thunk,并在Redux store的创建过程中将其作为中间件应用。这样,你就可以在派发action时使用函数。
  2. 创建一个异步action:使用redux-thunk,你可以创建一个返回函数的action,而不仅仅是一个普通的action对象。在这个函数中,你可以执行异步操作,例如发送网络请求或者进行其他耗时的操作。
  3. 在异步action中处理异步操作:在异步action函数中,你可以执行异步操作,并在操作完成后派发其他的action。通常情况下,你会在异步操作开始时派发一个loading状态的action,然后在操作完成后派发一个成功或失败的action。
  4. 等待从redux-thunk调度返回的值:由于redux-thunk允许我们在派发函数时返回一个Promise对象,我们可以通过使用async/await或者.then()来等待从redux-thunk调度返回的值。这样,我们可以在异步操作完成后执行进一步的逻辑。

总结: 在使用redux-thunk时,我们可以通过创建异步action来处理异步操作,并且可以使用async/await或者.then()来等待从redux-thunk调度返回的值。这样,我们可以更好地控制异步操作的流程,并在操作完成后执行进一步的逻辑。

请注意,以上答案中没有提及云计算相关的内容,因为该问题与云计算领域无关。如果您有其他关于云计算或其他相关领域的问题,我将非常乐意为您解答。

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

相关·内容

  • 高频React面试题及详解

    为什么选择使用框架不是原生? 框架好处: 组件化: 其中以 React 组件化最为彻底,甚至可以到函数级别的原子组件,高度组件化可以是我们工程易于维护、易于组合拓展。...state,这个函数有一个返回,会作为第三个参数传给componentDidUpdate,如果你不想要返回,可以返回null,此生命周期必须与componentDidUpdate搭配使用 componentDidUpdate...Props 影响内层组件状态不是直接改变其 State不存在冲突和互相干扰,这就降低了耦合度 不同于 Mixin 打平+合并,HOC 具有天然层级结构(组件树结构),这又降低了复杂度 HOC...保存数据,数据变化后自动处理响应操作 redux使用不可变状态,这意味着状态是只读,不能直接去修改它,而是应该返回一个新状态,同时使用纯函数;mobx中状态是可变,可以直接对其进行修改 mobx...redux-thunk优点: 体积小: redux-thunk实现方式很简单,只有不到20行代码 使用简单: redux-thunk没有引入像redux-saga或者redux-observable额外范式

    2.4K40

    C++核心准则-F.48 不要返回使用std:move局部变量获得引用​

    F.48: Don't return std::move(local) F.48 不要返回使用std:move局部变量获得引用 Reason(原因) With guaranteed copy...目前,为了保证省略拷贝动作,在返回语句中显式使用std::move差不多是最差方式了。 译者注:copy elision称为拷贝省略或者译作“省略不必要拷贝”,是很重要优化技术。...Example, bad(反面示例) S f() { S result; return std::move(result); } 译者注:使用std::move强制回避拷贝动作做法是不被推荐...Example, good(良好示例) S f() { S result; return result; } 译者注:后一种写法利用了返回优化(Return value optimization...,缩写为RVO)功能,它是C++一项编译优化技术。

    2.1K10

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

    用户使用方式非常简单 用户之间没有协作 不需要与服务器大量交互,也没有使用 WebSocket 视图层(View)只单一来源获取数据 组件角度看,如果你应用有以下场景,可以考虑使用 Redux。...不是直接通知其他组件,组件内部通过订阅 store 中状态 state 来刷新自己视图 1.4、Redux是什么?...很多人认为redux必须要结合React使用,其实并不是的,Redux 是 JavaScript 状态容器,只要你项目中使用到了状态,并且状态十分复杂,那么你就可以使用Redux管理你项目状态,它可以使用在...reducer会根据传入actiontype对state进行不同操作,然后返回一个新state,不是在原有state基础上进行修改,但是如果遇到了未知(不匹配)action,就会返回原有的...,页面第一次会渲染,不会说等待这个数据成功存入redux里面才会渲染页面。

    4.2K30

    美团前端react面试题汇总

    时间耗时比较:1)数据请求由服务端请求首屏数据,不是客户端请求首屏数据,这是"快"一个主要原因。服务端在内网进行请求,数据响应速度快。...就是服务端渲染不需要等待js代码下载完成并请求数据,就可以返回一个已有完整数据首屏页面。...ownProps 组件通过props传入参数。reducer 到组件经历过程:reducer对action对象处理,更新组件状态,并将新状态返回store。...通过connect(mapStateToProps,mapDispatchToProps)(Component)对组件 Component进行升级,此时将状态store取出并作为props参数传递到组件...)跳转,此时只是链接变了,并没有刷新页面标签就是普通超链接了,用于当前页面跳转到href指向另一 个页面(非锚点情况)。

    5.1K30

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

    applyMiddleware 接受任意个中间件作为入参,返回将会作为参数传入 createStore,这就是中间件引入过程。 1.2. ...若 action 是一个函数,那么 redux-thunk 就会执行它并且返回执行结果;若 action 不是一个函数,那么它就不是 redux-thunk 处理目标,直接调用 next,告诉 Redux...下面我出入参角度简单提取了一下 applyMiddleware 源码框架: // applyMiddlerware 会使用“...”运算符将入参收敛为一个数组 export default function...reducer 方法特点是,会对数组中每个元素执行我们指定函数逻辑,并将其结果汇总为单个返回。...总结 在这一讲,我们首先以 redux-thunk 中间件为例,“异步工作流”场景切入,认识了 Redux 中间件工作模式。

    36130

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

    你也不能仅仅使用connect()来绑定action creator,因为showNotificationWithTimeout()并不是一个真正action creator,他返回不是Redux...我之前就告诉过你:只要使用了Redux Thunk,如果你想dispatch一个函数,不是一个纯对象,这个中间件会自己帮你调用这个函数,而且会将dispatch作为第一个参数传进去。...cerator,这里我们可以提前退出 // Redux不关心这里返回,没返回也没关系 if (!...你可能会发现很多例子都返回了Promise,这个不是必须,但是用起来却很方便。Redux并不关心你thunk返回了什么,但是他会将这个通过外层dispatch()返回给你。...Redux-Thunk最主要作用是帮你给异步action传入dispatch,这样你就不用调用地方手动传入dispatch,从而实现了调用地方和使用地方解耦。

    3.5K51

    React知识图谱

    HOC:高阶组件是参数为组件,返回为新组件函数。...使用场景如react-reduxconnect。 useContext 接收一个 context 对象(React.createContext 返回)并返回该 context 的当前。...recoil:融合React自身(目前还处于实验阶段) recoil是Facebook开发状态管理库,目标是做一个高性能状态管理库,并且可以使用React内部调度机制,包括会支持并发模式。...recoil是Facebook开发,可以使用React内部调度机制,这是redux和mobx不支持。 recoil目前还是实验阶段,想要应用到自己项目中,等待正式版发了再说吧。...目前任何一个状态管理库都不是强制使用,也有很多精小项目不使用第三方状态管理库,只是使用React自身state、useContext等API就可以达到目的。

    33020

    深入理解 redux 数据流和异步过程管理

    一般来说,除了某部分状态数据是只有某个组件关心,我们会把状态数据放在组件内以外,业务数据、多个组件关心状态数据都会放在 store 里面。...组件 store 中取数据,当交互时候去通知 store 改变对应数据。...这样数据流动是单向,清晰,很容易管理。 这就像为什么我们在公司里想要什么权限都要走审批流,不是直接找某人,一样道理。集中管理流程比较清晰,而且还可以追溯。...异步过程管理 很多情况下改变 store 数据都是一个异步过程,比如等待网络请求返回数据、定时改变数据、等待某个事件来改变数据等,那这些异步过程代码放在哪里呢? 组件?...不是的。generator 执行后返回是一个 iterator,需要另外一个程序调用 next 方法才会继续执行。所以怎么执行、是否继续执行都是由另一个程序控制

    2.5K10

    字节前端面试被问到react问题

    处理异步操作,actionCreator返回是promiseReact中refs作用是什么?...:提供一种组件之间状态共享,不必通过显式组件树逐层传递props;使用Redux等状态库。...)跳转,此时只是链接变了,并没有刷新页面标签就是普通超链接了,用于当前页面跳转到href指向另一 个页面(非锚点情况)。...,它使得状态管理简单可伸缩∶Action∶定义改变状态动作函数,包括如何变更状态;Store∶ 集中管理模块状态(State)和动作(action)Derivation(衍生)∶ 应用状态中派生而出...适用observable保存数据,数据变化后自动处理响应操作redux使用不可变状态,这意味着状态是只读,不能直接去修改它,而是应该返回一个新状态,同时使用纯函数;mobx中状态是可变,可以直接对其进行修改

    2.1K20

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

    HOC 自身不是 React API 一部分,它是一种基于 React 组合特性形成设计模式。具体而言,高阶组件是参数为组件,返回为新组件函数。...浅比较会忽略属性和或状态突变情况,其实也就是数据引用指针没有变化,数据发生改变时候render是不会执行。如果需要重新渲染那么就需要重新开辟空间引用数据。...(1)使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊像redux-saga...this 做各种各样事情,函数组件不可以; 类组件中可以定义并维护 state(状态),函数组件不可以; 除此之外,还有一些其他不同。...这就意味着原则上来讲,React 数据应该总是紧紧地和渲染绑定在一起类组件做不到这一点。函数组件就真正地将数据和渲染绑定到了一起。

    2K00

    2022社招react面试题 附答案

    由于JavaScript中异步事件性质,当您启动API调⽤时,浏览器会在此期间返回执⾏其他⼯作。当React渲染⼀个组件时,它不会等待componentWillMount它完成任何事情。...state,这个函数有⼀个返回,会作为第三个参数传给componentDidUpdate,如果你不想要返回,可以返回null,此⽣命周期必须与componentDidUpdate搭配使⽤; componentDidUpdate...受控组件是React控制中组件,并且是表单数据真实唯一来源。 非受控组件是由DOM处理表单数据地方,不是在 React 组件中。...尽管非受控组件通常更易于实现,因为只需使用refs即可从DOM中获取值,但通常建议优先选择受控制组件,不是非受控制组件。...保存数据,数据变化后⾃动处理响应操作 redux使⽤不可变状态,这意味着状态是只读,不能直接去修改它,⽽是应该返回⼀个新状态,同时使⽤纯函数;mobx中状态是可变,可以直接对其进⾏修改 mobx

    2.1K10

    造一个 redux-thunk 轮子

    不过,我觉得这是结果出发找造这个轮子原因,并不能从需求层面解释这个中间件到底解决了什么问题。 本文希望解决问题角度来推导 redux-thunk 诞生原因。...另一个解耦方法:我们可以把 dispatch 作为参数传入,不是直接使用,这样就可以完成函数解耦了: // 根据 Id 获取 userInfo const fetchUserById = (dispatch...后为返回中间件部分 交给下一个中间件处理 在 fetchUserById 函数里 dispatch 工作是要分发 action,要这个 action 是要走完所有中间件流程不是传给下一个中间件处理...,所以中间件里传入参数为 dispatch 函数不是 next 函数。...优化与重复总是在天平左右,做项目时应该保持一种天然平衡,不是走向极端。

    74030

    React 原理问题

    所以即便在回调函数里,你拿到还是初始props和state。如果想得到“最新”,可以使用ref。 3、hooks 为什么不能放在条件判断里?...shouldComponentUpdate(nextProps, nextState) 有两个参数nextProps和nextState,表示新属性和变化之后state,返回一个布尔,true表示会触发重新渲染...方法组件中优化手段 1、使用 useMemo 2、使用 useCallBack 其他方式 1、在列表需要频繁变动时,使用唯一 id 作为 key,不是数组下标。...2、必要时通过改变 CSS 样式隐藏显示组件,不是通过条件判断显示隐藏组件。...数据可变性不同 Redux强调是对象不可变性,不能直接操作状态对象。而是在原来状态对象基础上返回一个新状态对象,最后返回应用的上一个状态 Mobx可以直接使用新值更新状态对象 4.

    2.5K00

    高级前端react面试题总结

    (2)使用useState时候,使用push,pop,splice等直接更改数组对象使用push直接更改数组无法获取到新,应该采用析构方式,但是在class里面不会有这个问题。...是最新,所以tabColumn每次也是最新,但是实际tabColumn是最开始,不会随着columns更新更新:const TableDeail = ({ columns,}:TableData...对React中Fragment理解,它使用场景是什么?在React中,组件返回元素只能有一个根元素。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...replaceState 是完全替换原来状态,相当于赋值,将原来 state 替换为另一个对象,如果新状态属性减少,那么 state 中就没有这个状态了。

    4.1K40

    Redux-Thunk中间件

    我们都知道,在使用redux时候,通过dispatch一个action 发生到reducer 然后传递给store修改状态 一系列都是同步,那如果说我dispatch一个action 这个action...帮我请求一下接口数据,你发现接口请求是异步,没有办法等接口数据返回再传递给reducer 这个时候中间件就产生啦。...可以将 thunk 看做 store dispatch() 方法封装器;我们可以使用 thunk action creator 派遣函数或 Promise,不是返回 action 对象。...例如:正常请求接口完再使用dispatch去修改状态。但是如果想在dispath -> action里面执行异步操作 就需要thunk 注意,没有 thunk 的话,默认地是同步派遣。...redux-thunk 使用实例: 首先安装:yarn add redux-thunk store.js import { createStore, combineReducers, applyMiddleware

    1.3K20

    一天梳理完react面试高频题

    处理异步操作,actionCreator返回是promise如何配置 React-Router 实现路由切换(1)使用 组件路由匹配是通过比较 path 属性和当前地址...通过引用不是使用来命名组件displayName。...props 是什么react核心思想是组件化,页面被分成很多个独立,可复用组件组件就是一个函数,可以接受一个参数作为输入,这个参数就是props,所以props就是外部传入组件内部数据由于react...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...不是宣布重新渲染Redux中connect有什么作用connect负责连接React和Redux(1)获取stateconnect 通过 context获取 Provider 中 store,通过

    4.1K20
    领券