理解redux中间件

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

posted @ 2020-03-28 23:47  wust_hy  阅读(194)  评论(0编辑  收藏  举报