首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏kyle的专栏

    redux-thunk

    一、redux-thunk介绍 redux-thunk用于处理异步action,同类型的有redux-saga 二、学习网址 https://github.com/reduxjs/redux-thunk github 三、安装与引入 npm install --save react-redux 安装 import thunk from 'redux-thunk'引入 三、如何使用redux-thunk import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer /reducers'; // 创建store的时候,第二个参数是中间件,redux-thunk提供了一个thunk中间件,用于处理异步的action export default createStore ( rootReducer, applyMiddleware(thunk) ); //异步的action, 由于使用了redux-thunkthunk中间件, //所以,在这个action里不用像同步

    72541发布于 2020-08-24
  • 来自专栏杨不易呀

    React-Redux-thunk

    前言React-Redux-Thunk是一个用于处理Redux异步操作的中间件,它扩展了Redux的能力,使您能够更轻松地处理异步操作,如网络请求或定时任务。 这就是React-Redux-Thunk发挥作用的地方。 在 Redux 中获取网络数据使用 redux-thunk 中间件redux-thunk 作用默认情况下 dispatch 只能接收一个对象, 使用 redux-thunk 可以让 dispatch 除了可以接收一个对象以外 使用 redux-thunk安装 redux-thunknpm install redux-thunk在创建 store 时应用 redux-thunk 中间件修改 store.js:import {createStore 中间件, redux-thunk 中间件的作用,可以让 dispatch 方法可以接收一个函数, 可以让我们在通过 dispatch 派发任务的时候去执行我们传入的方法。

    71020编辑于 2023-10-01
  • 来自专栏Czy‘s Blog

    Thunk函数的使用

    Thunk函数的使用 编译器的求值策略通常分为传值调用以及传名调用,Thunk函数是应用于编译器的传名调用实现,往往是将参数放到一个临时函数之中,再将这个临时函数传入函数体,这个临时函数就叫做Thunk Thunk函数就是作为传名调用的实现而构建的,往往是将参数放到一个临时函数之中,再将这个临时函数传入函数体,这个临时函数就叫做Thunk 函数。 ){ console.log(thunk() + 1); // 3 } var thunk = function(){ return x + 1; } s(thunk); Js中的Thunk (1000, 1, 2, 3); delayAsyncThunk(callback); 实现一个简单的Thunk函数转换器,对于任何函数,只要参数有回调函数,就能写成Thunk函数的形式。 函数中funct执行的参数,在使用Thunk函数进行自动流程管理时,必须保证yield后是一个Thunk函数。

    2.1K20发布于 2020-08-27
  • 来自专栏流媒体人生

    ATL Thunk机制学习

      ATL模板类库使用Thunk技术来实现与窗口消息相关联的HWND和负责处理消息的对象的this指针之间的映射。      pThis->m_thunk.Init(WindowProc, pThis);           WNDPROC pProc = pThis->m_thunk.GetWNDPROC();            m_relproc = (int)pFun - ((int)this+sizeof(Thunk));   //把CPU里的缓冲数据写到主内存。          Thunk m_Thunk;   //真实运行的函数。 CTest Test;       Test.m_Thunk.Init(Test.TestFun,&Test);       TESTFUN pTestFun = (TESTFUN)&(Test.m_Thunk

    97610发布于 2018-08-02
  • 来自专栏张宗伟 plus

    redux-thunk中间件

    redux-thunk是一种中间件,它能使你在action creator中返回函数,此返回函数就是thunk函数,模拟一下就是 // thunk函数 (dispatch,getState,extraCustomArgument 同样此thunk函数可以被dispatch,并且thunk函数的返回值也是dispatch的返回值,另外在action creator中也可以dispatch其他的thunk函数。 // thunk函数 function thunk() { return 1+2 } // 当你call时,才能得到 1+2 的值 thunk() // 3 此函数其实早就有了,之前是用于“传名调用 thunk() { return 3+2 } function f(thunk) { return thunk()*2 } 对于JavaScript来说,thunk具有另一种含义,用于将多参数函数转换成单参数函数 (fileName,callback) 那么对于有callback的函数来说,都可以进行thunk化,写一个thunk函数转换器。

    77640编辑于 2022-10-28
  • 来自专栏杨不易呀

    React-Redux-thunk实现原理

    前言React-Redux-Thunk是一个用于处理Redux异步操作的中间件,它的实现原理基于Redux middleware的概念。 本篇的内容也是基于上次实现 Redux 实现原理的文章进行改造的,在 redux-thunk 中,如果通过 dispatch 派发的任务是一个对象, 那么就立即执行 reducer, 如果通过 dispatch

    38330编辑于 2023-10-01
  • 来自专栏掘金安东尼

    JavaScript 中「Thunk」怎么理解?

    ---- 什么是 Thunk ? 简单理解:在计算机编程中,Thunk 就是一种实现延迟执行的手段。 举个栗子 我要计算 99 的 9 次方,然后再把它打印出来,你会怎么写? Promise 就是基于 Thunk。” = toThunk(readFile); // readFile 是异步函数 thunk = thunk('. /foo'); thunk((err, data) => /* do sth. */)) thunk 的两步执行,第一步传入参数,第二步是传入回调函数,这就是 Promise 的 then 的方法思路! thunk 还可以搭配 es6 生成器使用,本篇就不作展开。 JavaScript 中「Thunk」怎么理解,你 get 到了吗? ---- OK,以上便是本篇分享。

    65920编辑于 2022-09-22
  • 来自专栏阮一峰的网络日志

    Thunk 函数的含义和用法

    凡是用到原参数的地方,对 Thunk 函数求值即可。 这就是 Thunk 函数的定义,它是"传名调用"的一种实现策略,用来替换某个表达式。 三、JavaScript 语言的 Thunk 函数 JavaScript 语言是传值调用,它的 Thunk 函数含义有所不同。 这个单参数版本,就叫做 Thunk 函数。 任何函数,只要参数有回调函数,就能写成 Thunk 函数的形式。下面是一个简单的 Thunk 函数转换器。 六、Thunk 函数的自动流程管理 Thunk 函数真正的威力,在于可以自动执行 Generator 函数。下面就是一个基于 Thunk 函数的 Generator 执行器。 当然,前提是每一个异步操作,都要是 Thunk 函数,也就是说,跟在 yield 命令后面的必须是 Thunk 函数。

    1.2K40发布于 2018-04-12
  • 来自专栏call_me_R

    理解 React 中的 Redux-Thunk

    Thunk 是一个逻辑编程概念。你可以用来处理推迟任何事件的计算或者评估的函数,并且 React-Thunk 可以有效地充当应用程序的单独线程。 通过 npm install redux-thunk --save 或者 yarn add redux-thunk 进行安装。 /reducers/index'; const store = createStore( rootReducer, applyMiddleware(thunk) ); 为什么是 Redux Thunk = createThunkMiddleware(); thunk.withExtraArgument = createThunkMiddleware; export default thunk; Thunk 怎么使用 Redux Thunk: 构建一个购物车 在本教程中,我们将使用 Redux Thunk 开发一个简单的购物车功能,更好地明白 Thunk 怎么工作。

    1.4K20编辑于 2023-07-09
  • 来自专栏bug收集

    redux-thunk 中间件的示例

    redux-thunk 简介 Redux处理异步任务——异步数据流中间件:redux-thunk & action是一个函数,函数内部处理异步任务 注意:默认情况下,redux自身只会处理同步数据流。 但是,如果涉及到异步操作,就应该使用 redux-thunk 这种的中间件,来处理异步数据流!!! 使用了redux-thunk中间件以后,我们需要修改action redux-thunk的使用 安装 ,引入 npm install redux-thunk // 下载两个中间件, redux-thunk 处理异步,redux-logger 日志模块 // npm i redux-thunk redux-logger 导入 import { createStore, applyMiddleware } from 'redux' import thunkMiddleware from 'redux-thunk' import { createLogger } from 'redux-logger' import

    81220编辑于 2022-07-22
  • 来自专栏海怪的编程小屋

    造一个 redux-thunk 轮子

    redux-thunk 不就是那个只有 14 行代码的轮子嘛?我一行就能写出来还要你来教我做事? 不错,redux-thunk 是一个非常小的库,不到 5 分钟就能理解并造出来。 本文希望从解决问题的角度来推导 redux-thunk 诞生的原因。 redux-thunk 到底解决了什么问题? 会发现 redux-thunk 并没有解决什么实际问题,只是提供了一种写代码的 “thunk 套路”,然后在 dispatch 的时候自动 “解析” 了这样的套路。 那有没有别的 pattern 呢? 那完全不用管理什么 thunk,saga 的,安心撸页面就可以了。 redux-thunk 说白了也只是提供一种代码书写的 pattern,对提取公共代码是有帮助的。

    1K30编辑于 2022-03-29
  • 来自专栏欧阳大哥的轮子

    多平台下的thunk技术原理以及应用

    导读:阅读文本你将能够了解到C标准库对快速排序的支持、简单的索引技术、thunk技术的原理以及应用、C++虚函数调用以及接口多重继承实现、动态库中函数调用的实现原理、以及在各操作系统平台上的thunk

    89120发布于 2018-12-21
  • 来自专栏欧阳大哥的轮子

    Thunk程序的实现原理以及在iOS中的应用(二)

    本文导读:虚拟内存以及虚拟内存的remap机制,以及通过remap机制来实现通过静态指令来构造thunk代码块。 ?Thunk程序的实现原理以及在iOS中的应用 入口处。 thunk程序其实就是一段代码块,这段代码块可以在运行时动态构造也可以在编译时构造。 从设计模式的角度来讲thunk程序可以作为一个适配器(Adapter)。 静态构造thunk程序 上一篇文章中实现了通过在内存中动态的构造机器指令来实现一段thunk代码,但是这种机制在iOS系统中是无法在发布版证书打包的程序中运行的。 静态指令来实现thunk程序的流程 从上面的流程图中可以很清楚的了解到通过对虚拟内存进行remap就可以不用动态构造指令来完成构建一个thunk程序块的能力,下面我们就结合第一篇文章中的快速排序,以及本文的

    1.4K20发布于 2019-03-05
  • 来自专栏IMWeb前端团队

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

    本文作者:IMWeb EnjoyChan 原文出处:IMWeb社区 未经同意,禁止转载 项目中使用redux-thunk来解决异步请求的问题,但是为什么要引入redux-thunk来解决异步请求问题 ,不借助redux-thunk就无法解决吗? , 或者说redux-thunk可以解决什么场景问题;来看下面这个场景,我们上面那份代码可能被多次调用,根据传入参数来执行,于是我们封装一个函数: // 2 function encapsulateFunc 函数,关于thunk不了解的可以戳链接http://www.ruanyifeng.com/blog/2015/05/thunk.html; 对比上述,使用redux-thunk可以帮助我们代码更优雅,封装设计更合理 ,当然redux-thunk是在我们需要的时候才引入,如果我们的实际项目明明可以简单解决,就不需要引入redux-thunk了。

    1.4K20发布于 2019-12-03
  • 来自专栏进击的大前端

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

    本文会讲解Redux官方实现的异步解决方案----Redux-Thunk,我们还是会从基本的用法入手,再到原理解析,然后自己手写一个Redux-Thunk来替换它,也就是源码解析。 ' import thunk from 'redux-thunk' const store = createStore( reducer, applyMiddleware(thunk) ) 另外你还可以将一个复杂的thunk action creator拆分成几个更小的thunk action creator。 这是因为thunk提供的dispatch也可以接收thunk,所以你可以一直嵌套的dispatch thunk。而且结合Promise的话可以更好的控制异步流程。 最后,不要使用任何库(包括thunk)如果你没有真实的需求。

    4K51发布于 2020-10-15
  • 来自专栏趣谈前端

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

    接下来笔者将从: Redux的工作机制 中间件实现原理 redux-thunk源码实现 这三个方面来带大家彻底掌握redux-thunk源码,从而对redux有更深入的了解和应用。 如果大家对react-redux-redux-thunk实战感兴趣的,读完之后可以移步笔者的《彻底掌握redux》之开发一个任务管理平台 正文 在解读Redux-thunk源码之前我们需要先掌握redux 在掌握了redux中间件实现原理之后, 我们再来看redux-thunk源码就非常容易理解了。 = createThunkMiddleware(); thunk.withExtraArgument = createThunkMiddleware; export default thunk; 没错 , 这就是redux-thunk的全部源码了,是不是很nice~。

    96920发布于 2020-08-20
  • 来自专栏边城浪子周刊

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

    state,createStore的参数形式如下: createStore(reducer, [preloadedState], enhancer) 所以我们创建 store 的代码如下: import thunk from 'redux-thunk' import { createStore, applyMiddleware } from 'redux' import reducers from '.. from 'redux-thunk' import { createBrowserHistory } from 'history' import { createStore, applyMiddleware 但是有一个问题,store.dispatch正常情况下,只能发送对象,而我们要发送函数,为了让store.dispatch可以发送函数,我们使用中间件——redux-thunk。 引入 redux-thunk 很简单,只需要在创建 store 的时候使用applyMiddleware(thunk)引入即可。

    3K00发布于 2020-11-19
  • 来自专栏憧憬博客分享

    Redux-Thunk中间件

    简单介绍一下thunk,这是一个中间件,是解决redux异步问题产生的。 使用 thunk 等中间件可以帮助在 Redux 应用中实现异步性。 可以将 thunk 看做 store 的 dispatch() 方法的封装器;我们可以使用 thunk action creator 派遣函数或 Promise,而不是返回 action 对象。 但是如果想在dispath -> action里面执行异步操作 就需要thunk 注意,没有 thunk 的话,默认地是同步派遣。 } from 'redux'; import thunk from 'redux-thunk'; import {add, deleter} from '.

    1.6K20发布于 2020-07-21
  • 来自专栏webpack@4.46.0源码分析

    5. 「snabbdom@3.5.1 源码分析」Thunks 函数

    介绍和使用 thunk 函数传入 一个选择器,一个 key 作为 thunk 的身份标识,一个返回 vnode 的函数,和一个 state 数组参数。 下面看下thunk的具体实现。 分析 export const thunk = function thunk( sel: string, key?: any, fn?: any, args? 节点 function init(thunk: VNode): void { const cur = thunk.data as VNodeData; const vnode = (cur.fn (thunk.data as VNodeData).args; thunk.data = vnode.data; thunk.children = vnode.children; thunk.text = vnode.text; thunk.elm = vnode.elm; if (ns) addNS(thunk.data, thunk.children, thunk.sel); } ##

    32720编辑于 2023-02-24
  • 来自专栏WebJ2EE

    React:Redux怎么处理异步?

    (就是下面要提到的redux-thunk、redux-promise) ? redux-thunk:不到10行代码,精简到炸! action 是一个简单 JS 对象; redux-thunk: store.dispatch((dispatch, getState) => { ... }) 注:redux-thunk 允许我们 dispatch 一个 thunk函数; redux-thunk 中间件允许你 dispatch 一个函数(即:thunk),异步逻辑就放在这个函数中处理; 感受一波redux-thunk的精炼 ? redux-thunk应用示例 ?

    3K30发布于 2019-07-19
领券