首页
学习
活动
专区
工具
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调度返回的值。这样,我们可以更好地控制异步操作的流程,并在操作完成后执行进一步的逻辑。

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

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

相关·内容

  • 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.2K10

    高频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

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

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

    4.5K30

    美团前端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 中间件的工作模式。

    45530

    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.6K51

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

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

    2.5K10

    React知识图谱

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

    38420

    字节前端面试被问到的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

    造一个 redux-thunk 轮子

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

    75030

    2022社招react面试题 附答案

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

    2.1K10

    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
    领券