Redux中间件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，页面会报错

总结

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