// 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))