脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Redux中间件redux-thunk使用

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，页面会报错

总结

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

您可能感兴趣的文章:

相关文章

最新评论