理解redux中间件

 1 export default function applyMiddleware(...middlewares) {
 2         return createStore => (...args) => {
 3             const store = createStore(...args)
 4             let dispatch = () => {
 5                 throw new Error(
 6                     ‘Dispatching while constructing your middleware is not allowed. ‘ +
 7                     ‘Other middleware would not be applied to this dispatch.‘
 8                 )
 9             }
10 
11             const middlewareAPI = {
12                 getState: store.getState,
13                 dispatch: (...args) => dispatch(...args)
14             }
15             const chain = middlewares.map(middleware => middleware(middlewareAPI))
16             dispatch = compose(...chain)(store.dispatch)
17             // dispatch is the new 
18             return {
19             ...store,
20             dispatch
21             }
22         }
23     }
24 
25     //dispatch in createStore 
26     // dispatch action and run the listener callBack
27     function dispatch(action) {
28         try {
29             isDispatching = true
30             currentState = currentReducer(currentState, action)
31         } finally {
32             isDispatching = false
33         }
34 
35         const listeners = (currentListeners = nextListeners)
36         for (let i = 0; i < listeners.length; i++) {
37             const listener = listeners[i]
38             listener()
39         }
40 
41         return action
42     }
43 
44 
45     // In createStore.js, the enhance is the function returned by applyMiddleware 
46     // return a store which dispatch is decorated
47     enhance(createStore)(reducer,preloadState)
48 
49     //  example looger middleware
50     function logger({getState})=>{
51         return (next)=>(action)=>{
52             // action 
53             const returnNext = next(action)
54             const state = getState()
55             console.log(`${ation.type}=>${state}`)
56             // doSomething
57             return returnNext
58         }
59     }