❗️❗️❗️中间件就是一个函数,对store.dispatch方法进行了改造,在发出 Action 和执行 Reducer 这两步之间,添加了其他功能。
Action 发出以后,Reducer 立即算出 State,这叫做同步;Action 发出以后,过一段时间再执行 Reducer,这就是异步
redux处理异步的方式有两种:
1.间接方式
2.中间件方式
间接方式:
间接方式就死自定义异步的行为,保留dispatch同步的功能。
思路:就是讲异步返回的结果塞进action中,然后在通过dispatch同步到reduce中,再改变state;
request.get(API)
.then(d => {
store.dispatch(type: xxx, playload: d)
})
❗️这种方式没有破坏dispatch的同步机制,原汁原味的使用dispatch将数据同步到state中,但不好的地方就是每次调用都会写很长的一段,
中间件方式
中间件方式中核心部分就是redux提供的
applyMiddleWare
这个高阶函数,它通过多层调用后会返回一个全新的store对象,全新的store对象和原来对象中,唯一的不同就是dispatch具备了异步的功能;❗️❗️❗️❗️MiddleWareAPI主要是通过塞进中间件,从而最终塞进action中,让action能具备dispatch的能力
中间件基本形式:
const MiddleWare = store => next => action => {
do...
// next(action) // 传递 action 到下个 middleware。
}
参数解释:
- store:其实就是MiddleWareAPI;
- next: 这里有两种情况,如果该中间件是在middlewares数组里最右边,则next就是store.dispatch;否则就是它相邻左边的一个中间件返回值(闭包函数,就是action => {}这个函数);
- action:可以是函数,也可以是含有promise的对象;