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

为什么在使用redux-thunk时,内部函数会返回一些东西?

在使用redux-thunk时,内部函数会返回一些东西的原因是因为redux-thunk是一个redux的中间件,它允许我们在action创建函数中编写异步逻辑。在传统的redux中,action创建函数只能返回一个普通的action对象,而不能返回一个函数。但是在使用redux-thunk后,我们可以在action创建函数中返回一个函数,这个函数可以接收dispatch和getState作为参数,从而可以进行异步操作。

返回的函数通常被称为thunk函数,它可以在内部进行异步操作,例如发起网络请求、访问数据库等。当这个函数被调用时,它可以触发一系列的action,这些action可以是普通的同步action,也可以是异步的thunk函数。这样就可以实现在异步操作完成后再更新store的状态。

返回的thunk函数可以有不同的形式,例如可以是一个普通的函数,也可以是一个带有闭包的函数。这取决于具体的业务需求和编码风格。

总结起来,使用redux-thunk时,内部函数会返回一些东西,是为了允许我们在action创建函数中编写异步逻辑,从而实现更复杂的业务需求。

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

相关·内容

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

prop 共享代码的简单技术 具有render prop 的组件接受一个返回React元素的函数,将render的渲染逻辑注入到组件内部。...PureComponent一般会用在一些纯展示组件上。 使用pureComponent的好处:当组件更新,如果组件的props或者state都没有改变,render函数就不会触发。...但是⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们借助redux的异步中间件进⾏异步处理。...(1)使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊像redux-saga...除此之外,由于开发者编写的逻辑封装后是和组件粘在一起的,这就使得类组件内部的逻辑难以实现拆分和复用。 (2)函数组件:函数组件就是以函数的形态存在的 React 组件。

2K00

Redux 原理与实现

redux 中也是如此,并且中间件是有顺序的,chain 数组最左侧的中间件先调用,然后在内部调用 next 方法,表示执行下一个中间件。...看到 reduce 函数是估计有些晕,这里解释一下,reduce 每次都返回一个函数(accum),在这个函数内部,一个函数的执行结果(返回 dispatch 函数作为另一个函数的参数传入(next...这也就是为什么 redux-logger 中间件为什么放在数组最右边,最左边的中间件先执行,不那样做可能就无法打印出准确的 action 信息。...也就是说,不做配置,我们可以直接使用 logger 函数配置参数,我们需要使用 createLogger 的返回值作为中间件函数: import { createLogger } from "...除了使用 redux-thunk 作为异步处理中间件之外,还可以使用 redux-saga,只是后者的学习成本会高一些

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

    中间件的引入 第 05 讲介绍 createStore 函数,已经简单地提过中间件:中间件相关的信息将作为 createStore 函数的一个 function 类型的入参被传入。...redux-thunk 的源码其实非常简洁,我第一次接触还是 2016 年,这么多年过去了,很多事情都变了,唯一不变的是 redux-thunk,它仍然那么好懂。...先来看看 applyMiddleware 的返回值。源码的注释中,我已经标明,它返回的是一个接收 createStore 为入参的函数。...这个函数将会作为入参传递给 createStore,那么 createStore 如何理解它呢?...什么是“内层函数”? 2. compose 函数到底是怎么组合函数的?它组合出来的又是个什么东西

    40530

    深度剖析github上15.1k Star项目:redux-thunk

    Actions.start()即可,我们也知道action返回的是一个标准的对象,但我们可以return之前做一些side effect。...redux中间件机制 说到中间件(middleware),使用过nodejs的人可能很熟悉,比如说知名的koa中间件,express中间件等,其实中间件笔者的理解是某个执行流中的某个环节做一些额外的处理的模块...接下来dispatch这段代码中出现了compose函数, 熟悉函数式编程的朋友不难猜到其内部肯定是实现批处理chain的函数,并将store.dispatch泵送至其内部。...,如果参数大于一,我们采用reduce将上一个函数返回的结果传给下一个函数参数,以此来实现之间的参数共享和传递,非常经典的设计。...,我们判断如果action为函数,则执行action本身并把必要参数传递给它,否则则直接触发dispatch,这样我们就实现了支持action为函数并且支持异步多dispatch的功能了,读到这还是非常感叹其设计的优雅和简洁

    75320

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

    继续深入源码前,我们先来思考一个问题,为什么我们要用Redux-Thunk,不用它行不行?...,使用Redux-Thunk前我们dispatch的action必须是一个纯对象(plain object),使用Redux-Thunk后,dispatch可以支持函数,这个函数传入dispatch...一些更复杂的应用中,你可能会发现你的异步控制流程通过thunk很难表达。比如,重试失败的请求,使用token进行重新授权认证,或者一步一步的引导流程中,使用这种方式可能很繁琐,而且容易出错。...返回的这个函数接收老的dispatch函数作为参数(也就是代码中的next),返回一个新的函数 返回的新函数就是新的dispatch函数,这个函数里面可以拿到外面两层传进来的store和老dispatch...我们评估是否要引入一个库最好想清楚我们为什么要引入这个库,是否有更简单的方案。

    3.6K51

    造一个 redux-thunk 轮子

    很多分析 redux-thunk 源码的文章一般会说:如果 action 是函数的话就传入 dispatch, action 函数里面使用 dispatch,如果action 不是函数的话就正常 dispatch...要实现上面的效果,我们需要更改 dispatch 函数内容,使其变成增强版的 dispatch:入参为函数执行该函数返回函数,同时传入 dispatch,如果为普通 action 直接 dispatch...函数 发现直接赋值是个很笨的行为,比较高级的是使用中间件来改写 dispatch 函数 最后,我们做了一个中间件出来,就叫做 redux-thunk 总结 最后来回答一些 redux 社区里看到的一些问题...之所以可以 await 是因为 getUserById 返回函数是异步的,当 dispatch(getUserById(id)) 其实是执行了 getUserById 的返回函数,此时 dispatch...要不要使用 redux-thunk? 如果你第 1 步的时候就觉得依不依赖 dispatch 对我都没什么影响,组件里直接用 dispatch 也很方便呀。

    74730

    2022社招React面试题 附答案

    React底层,主要对合成事件做了两件事: 事件委派: React会把所有的事件绑定到结构的最外层,使用统一的事件监听器,这个事件监听器上维持了一个映射来保存所有组件内部事件监听和处理函数。...prop 共享代码的简单技术 具有render prop 的组件接受一个返回React元素的函数,将render的渲染逻辑注入到组件内部。...React V15 渲染递归比对 VirtualDOM 树,找出需要变动的节点,然后同步更新它们, 一气呵成。...(5)Mixins React.createClass:使用 React.createClass 的话,可以创建组件添加一个叫做 mixins 的属性,并将可供混合的类的集合以数组的形式赋给 mixins...一般情况下,组件的render函数返回的元素会被挂载它的父级组件上: import DemoComponent from '.

    2K50

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

    React底层,主要对合成事件做了两件事: 事件委派: React会把所有的事件绑定到结构的最外层,使用统一的事件监听器,这个事件监听器上维持了一个映射来保存所有组件内部事件监听和处理函数。...prop 共享代码的简单技术 具有render prop 的组件接受一个返回React元素的函数,将render的渲染逻辑注入到组件内部。...React V15 渲染递归比对 VirtualDOM 树,找出需要变动的节点,然后同步更新它们, 一气呵成。...(5)Mixins React.createClass:使用 React.createClass 的话,可以创建组件添加一个叫做 mixins 的属性,并将可供混合的类的集合以数组的形式赋给 mixins...一般情况下,组件的render函数返回的元素会被挂载它的父级组件上: import DemoComponent from '.

    2K00

    高频React面试题及详解

    为什么选择使用框架而不是原生? 框架的好处: 组件化: 其中以 React 的组件化最为彻底,甚至可以到函数级别的原子组件,高度的组件化可以是我们的工程易于维护、易于组合拓展。...render: render函数是纯函数,只返回需要渲染的东西,不应该包含其它的业务逻辑,可以返回原生的DOM、React组件、Fragment、Portals、字符串和数字、Boolean和null...,这个函数有一个返回值,作为第三个参数传给componentDidUpdate,如果你不想要返回值,可以返回null,此生命周期必须与componentDidUpdate搭配使用 componentDidUpdate...第三个参数是getSnapshotBeforeUpdate返回的,如果触发某些回调函数需要用到 DOM 元素的状态,则将对比或计算的过程迁移至 getSnapshotBeforeUpdate,然后...而且componentWillMount请求会有一系列潜在的问题,首先,服务器渲染,如果在 componentWillMount 里获取数据,fetch data执行两次,一次服务端一次客户端

    2.4K40

    前端react面试题(必备)2

    this.props就是汲取了纯函数的思想。props的不可以变性就保证的相同的输入,页面显示的内容是一样的,并且不会产生副作用为什么使用jsx的组件中没有看到使用react却需要引入react?...尽管 React 使用高度优化的 Diff 算法,但是这个过程仍然损耗性能.为什么React并不推荐优先考虑使用Context?...) 返回false 那么不能保证Context的更新一定可以使用Context的子组件,因此,Context的可靠性需要关注调和阶段 setState内部干了什么当调用 setState ,React...useLayoutEffect:useLayoutEffect浏览器渲染前执行useEffect浏览器渲染之后执行当父组件引入子组件以及更新某一个值的状态的时候,往往造成一些不必要的浪费,而useMemo...useCallback父组件更新子组件渲染,针对方法不重复执行,包装函数返回函数;useMemo:const memoizedValue =useMemo(callback,array)callback

    2.3K20

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

    本文作者:IMWeb EnjoyChan 原文出处:IMWeb社区 未经同意,禁止转载 项目中使用redux-thunk来解决异步请求的问题,但是为什么要引入redux-thunk来解决异步请求问题...,只需要关注传入的参数; 观察ecncapsulateFunc,我们会发现它返回了一个函数,参数传入dispatch,我们称ecncapsulateFunc为thunk函数,关于thunk不了解的可以戳链接...http://www.ruanyifeng.com/blog/2015/05/thunk.html; 对比上述,使用redux-thunk可以帮助我们代码更优雅,封装设计更合理,当然redux-thunk...是我们需要的时候才引入,如果我们的实际项目明明可以简单解决,就不需要引入redux-thunk了。...createStore第三个参数,那么applyMiddleware方法执行后返回了什么呢,查看redux官方文档,看到createStore的使用如下: createStore(reducer, [preloadedState

    1.1K20

    一天梳理完react面试题

    这是由于 React 16.4^ 的版本中 setState 和 forceUpdate 也触发这个生命周期,所以当组件内部 state 变化后,就会重新走这个方法,同时会把 state 值赋值为...一般来说需要返回一个 jsx 元素,这时 React 根据 props 和 state 来把组件渲染到界面上;不过有时,你可能不想渲染任何东西,这种情况下让它返回 null 或者 false 即可;componentDidMount...除此之外,由于开发者编写的逻辑封装后是和组件粘在一起的,这就使得类组件内部的逻辑难以实现拆分和复用。(2)函数组件:函数组件就是以函数的形态存在的 React 组件。...做各种各样的事情,而函数组件不可以;类组件中可以定义并维护 state(状态),而函数组件不可以;除此之外,还有一些其他的不同。...这样做, React知道发生的确切变化,并且通过了解发生的变化后,绝对必要的情况下进行更新DOM,即可将因操作DOM而占用的空间最小化。setState 是同步异步?为什么?实现原理?

    5.5K30

    字节前端必会react面试题1

    ,不使用键或将索引用作键导致奇怪的行为。...注意:constructor () 必须配上 super(), 如果要在constructor 内部使用 this.props 就要 传入props , 否则不用JavaScript中的 bind 每次都会返回一个新的函数..., 为了性能等考虑, 尽量constructor中绑定事件使用箭头函数(arrow functions)的优点是什么作用域安全:箭头函数之前,每一个新创建的函数都有定义自身的 this 值(构造函数中是新对象...为什么 useState 要使用数组而不是对象useState 的用法:const [count, setCount] = useState(0)可以看到 useState 返回的是一个数组,那么为什么返回数组而不是返回对象呢...,那么使用者可以对数组中的元素命名,代码看起来也比较干净如果 useState 返回的是对象,解构对象的时候必须要和 useState 内部实现返回的对象同名,想要使用多次的话,必须得设置别名才能使用返回值下面来看看如果

    3.2K20

    高级前端react面试题总结

    调和阶段 setState内部干了什么当调用 setState ,React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态这将启动一个称为和解(reconciliation)...UI 的占用空间React Hooks平时开发中需要注意的问题和原因(1)不要在循环,条件或嵌套函数中调用Hook,必须始终 React函数的顶层使用Hook这是因为React需要利用调用顺序来正确更新相应的状态...对React中Fragment的理解,它的使用场景是什么?React中,组件返回的元素只能有一个根元素。...React V15 渲染递归比对 VirtualDOM 树,找出需要变动的节点,然后同步更新它们, 一气呵成。...在编译完成之后,JSX 表达式就变成了常规的 JavaScript 对象,这意味着你可以 if 语句和 for 循环内部使用 JSX,将它赋值给变量,接受它作为参数,并从函数返回它。

    4.1K40

    redux middleware 源码分析

    面对这些场景,一个个修改 dispatch 或 reducer 代码有些乏力,我们需要一个可组合的、自由增减的插件机制,Redux 借鉴了 Koa 中 middleware 的思想,利用它我们可以在前端应用中便捷地实现如日志打印.../middleware/logger' const enhancer = applyMiddleware(thunk, logger), // 以 redux-thunk、logger 中间件为例介绍中间件的使用...(action) => {} 函数 } dispatch 是如何被加工的 接着上个小节, dispatch = compose(...chain)(store.dispatch) 中发现了 compose...=> a(b(...args))) } compose 源码中的 funcs.reduce((a, b) => (...args) => a(b(...args))) 算是比较重要的一句,它的作用是返回组合参数后的函数...拿上个小节提到的 logger、redux-thunk 中间件为例,其 middleware 的内部串行调用方式如下,从而完成了 dispatch 功能的增强(支持如 this.props.dispatch

    1.3K40

    一文梭穿Vuex、Flux、Redux、Redux-saga、Dva、MobX

    正文从这开始~~ 这篇文章试着聊明白这一堆看起来挺复杂的东西聊之前,大家要始终记得一句话:一切前端概念,都是纸老虎。...Reducer 返回新的 State 。...但不代表是唯一的方式,还有很多方式,比如就不用 Action,而是应用内部调用异步请求,请求完毕直接 commit mutation,当然也可以。...其实 redux-saga 是用一些学习的复杂度,换来了代码的高可维护性,还是很值得项目中使用的。 Dva Dva是什么呢?...看这篇文章的人,大概率会对面向对象的思想比较熟悉,而对函数式编程的思想略陌生。Flux 或者说 Redux 的思想主要就是函数式编程(FP)的思想,所以学习起来觉得累一些

    5.5K10

    理解 React 中的 Redux-Thunk

    Redux Thunk 是一个中间件,它允许 Redux 返回函数而不是 actions。这就允许你延迟处理 actions 的时候结合 promises 使用。...return { ...state, zip: MOR0O0 } 为了让事情简单,Redux-thunk 是一个中间件,使用户能够使用异步函数代替 API 调用。...action 对象应该被返回,因为 action 是一个对象。Redux-thunk 允许一个 action creator 返回一个函数!现在,我们可以做任何异步工作。...: 第一个参数 reducer - 必填 第二个参数是 state 初始值 - 可选 第三个参数是中间件 - 可选 由于嵌套函数的特定语法,createStore 函数根据参数的类型自动确定传递的参数是中间件...怎么使用 Redux Thunk: 构建一个购物车 本教程中,我们将使用 Redux Thunk 开发一个简单的购物车功能,更好地明白 Thunk 怎么工作。

    50220

    百度前端高频react面试题总结

    Redux内部原理 内部怎么实现dispstch一个函数的以redux-thunk中间件作为例子,下面就是thunkMiddleware函数的代码// 部分转为ES5代码,运行middleware函数返回一个新的函数...库内部源码非常的简单,允许action是一个函数,同时支持参数传递,否则调用方法不变redux创建Store:通过combineReducers函数合并reducer函数返回一个新的函数combination...将这个新函数作为参数传入createStore函数函数内部通过dispatch,初始化运行传入的combination,state生成,返回store对象redux中间件:applyMiddleware...函数中间件的主要目的就是修改dispatch函数返回经过中间件处理的新的dispatch函数redux使用:实际就是再次调用循环遍历调用reducer函数,更新state这三个点(...) React...这个生命周期函数是为了替代componentWillReceiveProps存在的,所以需要使用componentWillReceiveProps,就可以考虑使用getDerivedStateFromProps

    1.7K30

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

    给组件添加ref时候,尽量不要使用匿名函数,因为当组件更新的时候,匿名函数会被当做新的prop处理,让ref属性接受到新函数的时候,react内部会先清空ref,也就是以null为回调参数先执行一次ref...当不需要使用生命周期钩子时,应该首先使用无状态函数组件 组件内部不维护 state ,只根据外部组件传入的 props 进行渲染的组件,当 props 改变,组件重新渲染。...JS的代码块执行期间,创建一个相应的作用域链,这个作用域链记录着运行时JS代码块执行期间所能访问的活动对象,包括变量和函数,JS程序通过作用域链访问到代码块内部或者外部的变量和函数。...为什么React并不推荐优先考虑使用Context?...return ( ); } } 但可以通过闭合的帮助函数组件内部进行使用 Refs

    2.3K30

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

    某个组件的状态,需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态 1.2、为什么要用Redux React中,数据组件中是单向流动的,这是react...分发给reducer 3、数据改变只能通过纯函数来执行 使用函数来执行修改,也就是reducer 纯函数是什么 ,一个函数返回结果只依赖其参数,并且执行过程中没有副作用。...reducer根据传入的action的type值对state进行不同的操作,然后返回一个新的state,而不是原有state的基础上进行修改,但是如果遇到了未知的(不匹配的)action,就会返回原有的...也正是由于这个机制,我们使用 middleware ,我们可以通过串联不同的 middleware 来满足日常的开发,每一个 middleware 都可以处理一个相对独立的业务需求且相互串联: 如上图所示...正因为这个action creator可以返回一个函数,那么就可以在这个函数中执行一些异步的操作,就比如网络请求。

    4.3K30
    领券