简易版redux实现

redux其实只有几个重要的api，getState，subscribe和dispatch，getState用来获取状态，subscribe监听状态的改变，dispatch派发事件改变状态，下面就来看下。首先是createStore，它接收三个参数，分别是reducer函数，初始状态值，还有就是中间件

function createStore(reducer,[initialState],enhancer){
    if(enhancer){return enhancer(createStore)(reducer,[initialState])
    var currentState=initialState?initialState:'';
    var currentReducer=reducer;
    var listeners=[];
    
    function getState(){
        return currentState;}
    
    function subscribe(listen){
        listeners.push(listen);}
    
    function dispatch(action){
        currentState=currentReducer(currentState,action);
        listeners.forEach(listen=>listen())
    }
        return {dispatch,store,subscribe}
}

这三个都比较简单，下面看一下中间件实现，首先是applyMiddleWare,它就相当于enhancer

function applyMiddleWare(...middlewares){
        return function(createStore){
            return function(reducer,[initialState]){
                const store=createStore(reducer,[initialState]);
                let dispatch=store.dispatch;
                const chain=[]
                const myStore={state:store.getState,
                               dispatch:...args=>{dispatch(...args)}}
                chain=middlewares.map(arg=>{arg(myStore)});
                dispatch=compose(...chain)(store.dispatch);
        return{...store,dispatch}
    
    }

applyMiddleWare是层层包裹的匿名函数，它会为每个中间件派发store，让每个middleware带着store执行一遍，执行的结果存储在chain数组里面，然后将chain数组作为参数传给compose函数，这是一个类似koa洋葱模型的函数

function compose(...fun){
        if(fun.length===0)return arg=>arg
        if(fun.length===1)return fun[0]
        return fun.reduce((left,right)=>(...args)=>{left(right(...args))})
    }

基本上就是这样