redux实现多个中间件的同时使用;

// mini-redux  ,enhancer 增强器
//中间件的实现:1,扩展createStore;2,applymiddleware的实现并且输出出去;
export function createStore(reducer,enhancer) {
    //如果有中间件那么createStor包一层中间件;再去执行createStore(reducer);
    if(enhancer){
        return enhancer(createStore)(reducer);
    }

    //初始化state 和listeners函数 集合;
    let currentState={};
    let currrentListeners=[];
  // 调用返回state
    function getState() {
        return currentState;
    }
// 调用返回state 把新的事件 push到listeners监听函数 集合
    function subscribe(listener) {
        currrentListeners.push(listener);
    }
    function dispatch(action) {
        // 传入action 通过reducer得到新的state;并且赋给自己这个里面的state
        currentState=reducer(currentState,action);
        // 把所有的 监听事件调用一遍
        currrentListeners.forEach(v=>v());
        // 为了中间键的调用,所以return action出去;
            return action;
    }
    //自己调用一遍先,要把所有的方法执行一遍;
    dispatch({type:"@myself-SKY"})
     //返回这三个核心方法以供调用。
    return {getState,subscribe,dispatch}
}


//三层嵌套 箭头函数意味这三层函数的返回, 在上面场景,第一个函数已经被嵌套;
export const applyMiddleware=(...middleWares)=>(createStore)=>(...args)=>{

      //首先 从参数中 调用发放拿到store;
     const store=createStore(...args);
     // 再从store里拿到dispatch;
     let dispatch=store.dispatch;

     // 定义middleware的API,应该是固定格式,暴露2个方法供用户使用;
     const midApi={
         getState:store.getState,
         dispatch:(...args)=>dispatch(...args)
     };

     /*
     * 实现多个middleWare,一起加到dispatch上,  一层一层的嵌套包裹dispatch进去;
     * */
     //首先 先把原来的第一步去给他所有的中间件的实现midApi接口,
    const middleWarechain= middleWares.map(v=>v(midApi))
   //然后调用compose把所有的中间件 链式调用起来 ,最后入进去store.dispatch调用一下;
    dispatch=compose(...middleWarechain)(store.dispatch);


     // 利用中间件加强dipatch,中间件的使用也是一个三层函数嵌套的使用,这边我们加强只需传入2个参数加强,实际调用就会传入第三个参数;
     // dispatch=middleWare(midApi)(store.dispatch);

     // 返回拥有加强的dispatch的对象,替换掉原来store里那个比较弱的dispatch;
    return {...store,dispatch}


};

/*
   * 实现链式调用;
   * */
const compose=(...funs)=>{
    //如果没有那么 就会把action返回出去;
     if(funs.length===0){
         return r=>r
     }
     //如果是1个 那么返回第0个;
    else if(funs.length===1){
         return funs[0]
     }
     //多个,就链式调用一下,人体蜈蚣呵呵哒;
     else{
         return  funs.reduce((res,item)=>(...args)=>res(item(...args)))
     }

}

以上代码重点是2个地方 ,


1,把原来的 改造单个dispatch的方法 改造成多个了;

 /*
  * 实现多个middleWare,一起加到dispatch上,  一层一层的嵌套包裹dispatch进去;
  * */
  //首先 先把原来的第一步去给他所有的中间件的实现midApi接口,
 const middleWarechain= middleWares.map(v=>v(midApi))
//然后调用compose把所有的中间件 链式调用起来 ,最后入进去store.dispatch调用一下;
 dispatch=compose(...middleWarechain)(store.dispatch);


  // 利用中间件加强dipatch,中间件的使用也是一个三层函数嵌套的使用,这边我们加强只需传入2个参数加强,实际调用就会传入第三个参数;
  // dispatch=middleWare(midApi)(store.dispatch);

2,compose的方法的实现

/*
   * 实现链式调用;
   * */
const compose=(...funs)=>{
    //如果没有那么 就会把action返回出去;
     if(funs.length===0){
         return r=>r
     }
     //如果是1个 那么返回第0个;
    else if(funs.length===1){
         return funs[0]
     }
     //多个,就链式调用一下,人体蜈蚣呵呵哒;
     else{
         return  funs.reduce((res,item)=>(...args)=>res(item(...args)))
     }

}

compose(fn1,fn2,fn3);   //f1(f2(f3))



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值