Redux中间件redux-thunk使用详解

更新时间：2025年09月05日 16:53:51 作者：噢，我明白了

redux-thunk是一种用于缓存异步数据的工具,能够优化页面性能并提升加载速度,它通过缓存接口数据,使多个页面复用数据,避免多次调用接口,解决异步操作带来的性能问题,使用redux-thunk可以简化中间件集成,提升应用运行效率

什么是redux-thunk？

redux-thunk主要用于处理reducer无法处理的异步

1.什么是异步？

同步：就是指前一个任务完成之后在继续执行下一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步：每一个任务有一个或多个回调函数（callback），前一个任务结束后，不执行下一个任务，而是执行回调函数，后一个任务不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

2.异步通常会发生在比较复杂的功能使用中

例如：

axios请求接口数据接口数据返回则为异步
回调函数，当函数a作为参数传递给函数b，并在b函数完成后执行。
在我们使用redux时遇到异步不能解决，可以通过redux-thunk解决。
我们也可以利用redux-thunk对数据进行缓存，实现调取一次接口，多页面可以复用数据，
避免了多次调用接口的性能问题，可以提升页面加载速度。

3.redux-thunk的使用

(1).下载：

npm i redux-thunk

(2).引入：

import reduxThunk from 'redux-thunk';

(3).使用应用中间件的方法applyMiddleware()引入到reducer文件中

const reducer = combineReducers({areducer,breducer,creducer})
//combineReducers是对多页面reducer管理使用
//将大的reducer拆分，之后用combineReducers进行合并
const store = createStore(reducer,applyMiddleware(reduxThunk));

(4).在action文件中使用redux-thunk

正常的action是由一个函数返回的普通的js对象
而当我们使用thunk时，则是在函数的内部中返回一个函数，dispath作为形参传入。这样我们也能很好的了解到源码写的原理
源码原理：判断函数传入的参数是func还是普通的jis对象，从而帮助我们对异步进行处理

function getLidtaction(){
	return (dispatch)=>{
		axios(url:'xxxxxxx', method: 'get',).then((res)=>{
		//此次写异步处理
		dispatch(
		{
		type:'',
		payload: res.data
		})
		})
	}
}

(5).在对应的list.js文件中使用

useEffect(()=>{
	store.dispatch(getLidtaction())
},[])

注意：applyMiddleware()一定要使用不然将无法使用thunk，页面会报错

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js判断节假日实例代码
因为要做一个日历控件,遇到国家法定节假日,怎么实现此功能呢？其实实现代码很简单的,下面小编给大家分享js判断节假日实例代码,需要的朋友参考下吧
2017-12-12
JavaScript中的style.cssText使用教程
这篇文章主要介绍了JavaScript中的cssText是什么,style.cssText使用教程,cssText返回值是什么,需要的朋友可以参考下
2014-11-11
javascripit实现密码强度检测代码分享
这篇文章主要介绍了javascripit实现密码强度检测，大家参考使用吧
2013-12-12
JavaScript 九种跨域方式实现原理
这篇文章主要介绍了JavaScript 九种跨域方式实现原理，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
点击按钮弹出模态框的一系列操作代码实例
这篇文章主要介绍了js弹出模态框方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
ElementUI中el-tree如何获取每个节点点击的选中状态
ElementUI中el-tree获取每个节点点击的选中状态,有时候需要获取el-tree每个节点的点击状态,可以通过以下方式,其中isCheck类型为布尔值,本文结合实例代码介绍ElementUI中el-tree获取每个节点点击的选中状态,感兴趣的朋友一起看看吧
2023-12-12
js弹出层(jQuery插件形式附带reLoad功能)
之前的弹出层做的挺好，但是代码结构有问题，这次用到了，重构了一下，改为jQuery的插件形式，感觉还不错，有兴趣的朋友可以参考下，希望可以帮助到你
2013-04-04
javascript HTML5 Canvas实现圆盘抽奖功能
这篇文章主要为大家详细介绍了javascript HTML5 Canvas实现圆盘抽奖功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-04-04
小程序实现分类页
这篇文章主要为大家详细介绍了小程序实现好看的分类页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
javascript中IIFE立即执行函数表达式来龙去脉解析
Ben Alman于2010年提出IIFE立即执行函数表达式,取代旧称Self-ExecutingAnonymousFunction,通过括号包裹函数声明转为表达式,实现立即执行,常见形式为()包裹,其他变种如new、void等不推荐使用,感兴趣的朋友一起看看吧
2025-07-07