理解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的过程做包装，不改变任何值。

export default function applyMiddleware(...middlewares) {
        return createStore => (...args) => {
            const store = createStore(...args)
            let dispatch = () => {
                throw new Error(
                    'Dispatching while constructing your middleware is not allowed. ' +
                    'Other middleware would not be applied to this dispatch.'
                )
            }

            const middlewareAPI = {
                getState: store.getState,
                dispatch: (...args) => dispatch(...args)
            }
            const chain = middlewares.map(middleware => middleware(middlewareAPI))
            dispatch = compose(...chain)(store.dispatch)
            // dispatch is the new 
            return {
            ...store,
            dispatch
            }
        }
    }

    //dispatch in createStore 
    // dispatch action and run the listener callBack
    function dispatch(action) {
        try {
            isDispatching = true
            currentState = currentReducer(currentState, action)
        } finally {
            isDispatching = false
        }

        const listeners = (currentListeners = nextListeners)
        for (let i = 0; i < listeners.length; i++) {
            const listener = listeners[i]
            listener()
        }

        return action
    }


    // In createStore.js, the enhance is the function returned by applyMiddleware 
    // return a store which dispatch is decorated
    enhance(createStore)(reducer,preloadState)

    //  example looger middleware
    function logger({getState})=>{
        return (next)=>(action)=>{
            // action 
            const returnNext = next(action)
            const state = getState()
            console.log(`${ation.type}=>${state}`)
            // doSomething
            return returnNext
        }
    }

 参考：

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