理解redux中间件

Posted 2020-11-27 wust-hy

redux questions :

1. reducers 函数如何创建和聚合

2. action创建函数如何如何包裹在dispatch函数中

3. 如何给默认的dispatch方法增加中间件能力

middleware:

（js context）中间件由函数组合的形式创建,实现与主要执行任务正交的功能。

tips：类似的有装饰器模式

在 redux middleware 要装饰的主要功能是 dispatch 函数。dispatch 函数的主要功能是发送actions 给

reducer函数来产生新的state。

applyMiddleware.js

1. 函数组合

    f(x) = 2x 

    g(x) = x^2+3x+1

    (f * g)(x) = f(g(x)) = f(2x) = 4x^2 + 6x + 1

    组合两个或者更多的函数，返回一个新的函数

    function compose(f,g){

        return x=>f(g(x))

    }

    从里向外求值

2. 柯里化（curring）

    通过柯里化，可以创建一个拥有部分信息的新函数

    （bind some information）

    function curring(a){

        return b=>a+b

    }

    通过函数组合和柯里化能够为数据处理创建一个管道

redux midddleware 被设计用来在daispatch调用之前创建组合在一起的函数。

对dispatch的过程做包装，不改变任何值。

 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     }

 参考：

      https://medium.com/@meagle/understanding-87566abcfb7a