redux中间件概念 比较容易理解。
在使用redux时,改变store state的一个固定套路是调用store.dispatch(action)方法,将action送到reducer中。
所谓中间件,就是在dispatch发送action 和 action到达reducer 之间,加入一些中间层,对action进行处理。
在之前学习redux的异步操作时,用到的redux-thunk就是一个中间件。action抵达reducer之前先对其进行判断,如果是对象就直接送到reducer;如果是函数就执行。
中间件特点:
1.是一个独立的函数,与其他中间件没有依赖关系
2.中间件可以有多个,按顺序组合使用
3.有统一的接口
中间件说白了就是一些第三方的插件,用来增强dispatch的功能,让我们可以在action到达reducer之前对action作出判断、改造、log下信息、实现复杂逻辑等。
当我们使用了多个中间件时,action依次从前一个中间件传到下一个中间件,最后抵达reducer。也可能在某个中间件进行处理后,发现没必要传到reducer了,就不传给下一个中间件(相当于丢弃,不再去处理)。
中间件必须定义为一个函数,它的基本结构如下:
1 function middleWare({dispatch,getState}){ 2 return function(next){ 3 return function(action){ 4 return next(action) 5 } 6 } 7 }
中间件接收store的dispatch和getState方法
中间件返回一个接收next参数的函数,next参数自身是一个函数。中间件调用next函数告诉redux处理工作已经完成,将action传递给下一个中间件
中间件返回的函数(第二行),又返回一个带参数action的函数,这个函数里对action进行处理
我们可以发现中间件函数的设计,对函数进行了柯里化,遵循了函数式编程的思想。每个函数都有纯粹而明确的功能,通过嵌套组合实现更复杂的功能。
使用中间件:
1 import { createStore, applyMiddleware } from ‘redux‘; 2 import thunk from ‘redux-thunk‘; 3 import reducer from ‘./reducers‘ 4 5 6 let store = createStore( 7 reducer, 8 applyMiddleware(thunk) 9 )
这是npm上redux-thunk文档给的使用使用该中间件的实例代码。使用中间件,需要用到redux的applyMiddleware方法。
在《深入浅出React和redux》一书中,作者倒是给出了两种使用中间件方式,代码不太一样:
1.针对简单场景:
1 import { createStore, applyMiddleware } from ‘redux‘; 2 import thunk from ‘redux-thunk‘ 3 4 //这里applyMiddleware执行后产生的是一个Store Enhancer函数, 5 //Store Enhancer又将redux的createStore作为参数,生成一个加强版的创建store的函数 6 const configureStore = applyMiddleware(thunk)(createStore); 7 const store = configreStore(reducer,initialState);
这里的代码虽然跟上一段代码不太一样,但是其实逻辑是一样的。因为createStore的第三个参数就是一个Store Enhancer,当只有两个参数且第二个参数是函数时,就当作Enhancer。applyMiddleware(thunk)的执行结果就是一个Enhencer。
作者说“利用configureStore创造的store将具有中间件的功能”。效果是一样的。
2.针对使用其他Store Enhancer的场景,作者说,实际中我们常常会使用不止一种SE,所以更通常的情况是:用redux提供的compose方法将applyMiddleware的返回函数和其他SE组装成一个Store Enhancer,传入createStore中。
1 import { createStore, applyMiddleware,compose } from ‘redux‘; 2 import thunk from ‘redux-thunk‘ 3 4 const win=window; 5 const storeEnhancer = compose( 6 applyMiddleware(...middlewares), 7 (win && win.devToolsExtension)?win.devToolsExtension():f=>f); 8 ); 9 const store = creatorStore(reducer,storeEnhancer);
其中applyMiddleware必须作为compose的第一个参数,因为中间件的顺序也是它们处理action的顺序,其他SE如果不能识别action,会报错。
中间件实现:
1 function isPromise(obj){ 2 return obj && typeof obj.then === ‘fuction‘ 3 } 4 5 export default function PromiseMiddleware((dispatch)){ 6 return function(next){ 7 return function(action){ 8 return isPromise(action)?action.then(dispatch):next(action); 9 10 } 11 } 12 }
这是书上的一个未改进的例子,redux中某一类型的函数总有固定的套路。这段代码判断action是否promise,并执行对应操作。遵循着MiddleWare=>(next)=>(action)=>{next(action)}的套路。
程墨强调,开发中间件时要记住两个原则:
1.中间件应该独立存在,在功能和顺序上不依赖于其他中间件
2.应该考虑到当前有多个中间件存在,要通过next(action)将action交还给中间件管道
Store Enhancer:
中间件可以定制增强dispatch方法,但也只是对于dispatch方法。要增强store,需要使用store enhancer。applyMiddleware的返回值其实就是个SE,通过SE可以增强store的各个方面。
我们知道createStore方法接收三个参数(reducer,initialState,storeEnhancer).storeEnhancer是一个函数,接收createStore模样的函数作为参数,返回一个新的createStore。
1 //一个什么都不做的SE 2 const doNothingSE = (createStore)=>(reducer,preState,enhancer)=>{ 3 const store = createStore(reducer,preState,enhencer); 4 return store; 5 }; 6 //每次dispatch都log下action的SE 7 const doNothingSE = (createStore)=>(reducer,preState,enhancer)=>{ 8 const store = createStore(reducer,preState,enhencer); 9 const originDispatch = store.dispatch; 10 store.dispatch=(action)=>{ 11 console.log(‘dispatch action: ‘ + action ); 12 originDispatch(action); 13 } 14 return store; 15 };
可以看出,SE的基本套路是将原来的成员函数的引用保存下来,然后写一个新的实现,在新的实现里添加额外功能代码,然后调用原来的成员函数,从而达到扩展功能的目的。
出了增强原有方法的功能外,还可以给store添加新方法,比如在函数体内定义一个newMethod,return {...store,newMethod};