applyMiddleware.ts
函數(shù)重載聲明
首先是對(duì)applyMiddleware函數(shù)的重載峭沦，重載了七個(gè)函數(shù)，主要是傳入?yún)?shù)個(gè)數(shù)的區(qū)別臀稚。
export default function applyMiddleware(): StoreEnhancer
export default function applyMiddleware<Ext1, S>(
middleware1: Middleware<Ext1, S, any>
): StoreEnhancer<{ dispatch: Ext1 }>
export default function applyMiddleware<Ext1, Ext2, S>(
middleware1: Middleware<Ext1, S, any>,
middleware2: Middleware<Ext2, S, any>
): StoreEnhancer<{ dispatch: Ext1 & Ext2 }>
export default function applyMiddleware<Ext1, Ext2, Ext3, S>(
middleware1: Middleware<Ext1, S, any>,
middleware2: Middleware<Ext2, S, any>,
middleware3: Middleware<Ext3, S, any>
): StoreEnhancer<{ dispatch: Ext1 & Ext2 & Ext3 }>
export default function applyMiddleware<Ext1, Ext2, Ext3, Ext4, S>(
middleware1: Middleware<Ext1, S, any>,
middleware2: Middleware<Ext2, S, any>,
middleware3: Middleware<Ext3, S, any>,
middleware4: Middleware<Ext4, S, any>
): StoreEnhancer<{ dispatch: Ext1 & Ext2 & Ext3 & Ext4 }>
export default function applyMiddleware<Ext1, Ext2, Ext3, Ext4, Ext5, S>(
middleware1: Middleware<Ext1, S, any>,
middleware2: Middleware<Ext2, S, any>,
middleware3: Middleware<Ext3, S, any>,
middleware4: Middleware<Ext4, S, any>,
middleware5: Middleware<Ext5, S, any>
): StoreEnhancer<{ dispatch: Ext1 & Ext2 & Ext3 & Ext4 & Ext5 }>
export default function applyMiddleware<Ext, S = any>(
...middlewares: Middleware<any, S, any>[]
): StoreEnhancer<{ dispatch: Ext }>
函數(shù)實(shí)現(xiàn)
export default function applyMiddleware(
...middlewares: Middleware[]
): StoreEnhancer<any> {
return (createStore: StoreEnhancerStoreCreator) => <S, A extends AnyAction>(
reducer: Reducer<S, A>,
preloadedState?: PreloadedState<S>
) => {
const store = createStore(reducer, preloadedState)
let dispatch: Dispatch = () => {
throw new Error(
'Dispatching while constructing your middleware is not allowed. ' +
'Other middleware would not be applied to this dispatch.'
)
}
const middlewareAPI: MiddlewareAPI = {
getState: store.getState,
dispatch: (action, ...args) => dispatch(action, ...args)
}
const chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose<typeof dispatch>(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
可以看到applyMiddleware返回一個(gè)對(duì)象旺垒，對(duì)象內(nèi)容為{...store, dispatch}宛裕。
首先看看定義的兩個(gè)接口 MiddlewareAPI與Middleware：
export interface MiddlewareAPI<D extends Dispatch = Dispatch, S = any> {
dispatch: D
getState(): S
}
export interface Middleware<
_DispatchExt = {}, // TODO: remove unused component (breaking change)
S = any,
D extends Dispatch = Dispatch
> {
(api: MiddlewareAPI<D, S>): (
next: D
) => (action: D extends Dispatch<infer A> ? A : never) => any
}
可以看到，MiddlewareAPI是一個(gè)包含dispath與state屬性的對(duì)象牙勘，而Middleware是一個(gè)高階函數(shù)职恳，將Middleware寫(xiě)成函數(shù)形式，其結(jié)構(gòu)大致為：
function Middleware(api: ...) {
return (next: ...) => (action: ...) {
...
}
}
若在上面的結(jié)構(gòu)上做出如下類(lèi)型申明：
type Next<...> = (next: ...) => (action: ...) => any
則可以看做Middleware的返回值類(lèi)型是個(gè)Next方面。
回到applyMiddleware函數(shù)代碼中放钦，帶入?yún)?shù)看看函數(shù)內(nèi)部運(yùn)作。
若傳入?yún)?shù) middlewares = [middleware1, middleware2, middleware3]
則 chain = [next1, next2, next3]
由前文提到 compose實(shí)現(xiàn)（ Redux源碼閱讀_2）
dispatch = compose<typeof dispatch>(...chain)(store.dispatch)
????????????? =next1(next2(next3(store.dispatch)))
就是個(gè)逐層進(jìn)行函數(shù)運(yùn)算的操作恭金。
后記
redux源碼到這里就告一段落（還有個(gè)bindActionCreator函數(shù)實(shí)現(xiàn)沒(méi)整理操禀，但是平時(shí)沒(méi)怎么用到就不弄了），回到最開(kāi)始的問(wèn)題横腿，基本都是react-redux的內(nèi)容颓屑，這個(gè)之后再去看……
只有一個(gè)可以回到的問(wèn)題，action相關(guān)……
看看redux關(guān)于action的聲明
export interface Action<T = any> {
type: T
}
就是一個(gè)包含type屬性的對(duì)象…… dispatch action的操作在前面關(guān)于dispatch函數(shù)的分析中也寫(xiě)到了……
文檔上寫(xiě)到的基本也就是源碼的所有內(nèi)容耿焊，不過(guò)只看文檔還是有點(diǎn)不知所云揪惦，結(jié)合源碼還是更能理解一點(diǎn)。（給自己找點(diǎn)借口……）
