middleware
相信用过nodejs的同学都知道中间件的概念,redux也有这个概念
1、中间件如何工作
redux中间件把:
action-->reducer
变成:
action-->middleware1-->middleware2-->……-->reducer
2、如何编写中间件
在redux中中间件也必须是纯函数(前面章节中我们已经介绍了纯函数的概念).
并且我们必须按照严格的格式:
var anyMiddleware = function ({ dispatch, getState }) {
return function(next) {
return function (action) {
// 中间件相关代码
}
}
}
我们可以看到中间件由三层嵌套的函数构成:
A、next函数可以将action传递给下一个中间件或者redux
B、第三层的action可以是上一个中间件处理后的action,或者从dispatch传递来的action
我们可以用柯里化来简化我们的中间件,在此不做赘述,推荐去看看Franklin Risby 教授写的 mostly-adequate-guide 一书
3、编写异步中间件
redux有自带的异步中间件叫thunkmiddleware
你会发现其实就是判断参数,如果是普通action,我们就让他直接进入下一步,如果不是就执行异步action函数。
源码:
export default function thunkMiddleware({ dispatch, getState }) {
return next => action => {
if (typeof action === 'function') {
return action(dispatch, getState);
}
return next(action);
};
}
我们可以自己编写:
var thunkMiddleware = function({dispatch,getState}){
return function(next){
return function(action){
return typeof action === 'function' ? action(dispatch,getState):next(action);
}
}
}
当然我们也可以编写更多中间件,比如说用于打印日志:
var logMiddleware = function({dispatch,getState}){
return function(next){
return function(action){
console.log(new Date()+' action:');
console.log(action);
next(action);
}
}
}
在代码区中编写异步中间件