手写Redux源码

红太狼 2021-08-27 21:49 386阅读 0赞

*  入口函数 index.js

export {  default as createStore } from "./createStore"
    export {  default as bindActionCreators } from "./bindActionCreators"
    export {  default as combineReducers } from "./combineReducers"
    export {  default as applyMiddleware } from "./applyMiddleware"
    export {  default as compose } from "./compose"

*  utils/ActionTypes.js

/** * 得到一个指定长度的随机字符串 * @param {*} length */
    function getRandomString(length) { 
      return Math.random().toString(36).substr(2, length).split("").join(".")
    }
    
    export default { 
      INIT() { 
        return `@@redux/INIT${ getRandomString(6)}`
      },
      UNKNOWN() { 
        return `@@redux/PROBE_UNKNOWN_ACTION${ getRandomString(6)}`
      }
    }

*  utils/isPlainObject.js

/** * 判断某个对象是否是一个plain-object * @param {*} obj */
    export default function isPlainObject(obj) { 
      if (typeof obj !== "object") { 
        return false;
      }
      return Object.getPrototypeOf(obj) === Object.prototype;
    }

*  createStore.js

import ActionTypes from "./utils/ActionTypes"
    import isPlainObject from "./utils/isPlainObject"
    
    /** * 实现createStore的功能 * @param {function} reducer reducer * @param {any} defaultState 默认的状态值 */
    export default function createStore(reducer, defaultState, enhanced) { 
        //enhanced表示applymiddleware返回的函数
        if (typeof defaultState === "function") { 
            //第二个参数是应用中间件的函数返回值
            enhanced = defaultState;
            defaultState = undefined;
        }
        if (typeof enhanced === "function") { 
            //进入applyMiddleWare的处理逻辑
            return enhanced(createStore)(reducer, defaultState);
        }
    
        let currentReducer = reducer, //当前使用的reducer
            currentState = defaultState; //当前仓库中的状态
    
        const listeners = [];  //记录所有的监听器（订阅者）
    
        function dispatch(action) { 
            //验证action
            if (!isPlainObject(action)) { 
                throw new TypeError("action must be a plain object");
            }
            //验证action的type属性是否存在
            if (action.type === undefined) { 
                throw new TypeError("action must has a property of type");
            }
            currentState = currentReducer(currentState, action)
            //运行所有的订阅者（监听器）
            for (const listener of listeners) { 
                listener();
            }
        }
    
        function getState() { 
            return currentState;
        }
    
        /** * 添加一个监听器（订阅器） */
        function subscribe(listener) { 
            listeners.push(listener); //将监听器加入到数组中
            let isRemove = false;//是否已经移除掉了
            return function () { 
                if (isRemove) { 
                    return;
                }
                //将listener从数组中移除
                const index = listeners.indexOf(listener);
                listeners.splice(index, 1);
                isRemove = true;
            }
        }
    
        //创建仓库时，需要分发一次初始的action
        dispatch({ 
            type: ActionTypes.INIT()
        })
    
        return { 
            dispatch,
            getState,
            subscribe
        }
    }

*  combineReducers.js

import isPlainObject from "./utils/isPlainObject"
    import ActionTypes from "./utils/ActionTypes"
    
    function validateReducers(reducers) { 
      if (typeof reducers !== "object") { 
        throw new TypeError("reducers must be an object");
      }
      if (!isPlainObject(reducers)) { 
        throw new TypeError("reducers must be a plain object");
      }
      //验证reducer的返回结果是不是undefined
      for (const key in reducers) { 
        if (reducers.hasOwnProperty(key)) { 
          const reducer = reducers[key];//拿到reducer
          //传递一个特殊的type值
          let state = reducer(undefined, { 
            type: ActionTypes.INIT()
          })
          if (state === undefined) { 
            throw new TypeError("reducers must not return undefined");
          }
          state = reducer(undefined, { 
            type: ActionTypes.UNKNOWN()
          })
          if (state === undefined) { 
            throw new TypeError("reducers must not return undefined");
          }
        }
      }
    }
    
    export default function (reducers) { 
      //1. 验证
      validateReducers(reducers);
      /** * 返回的是一个reducer函数 */
      return function (state = { }, action) { 
        const newState = { }; //要返回的新的状态
        for (const key in reducers) { 
          if (reducers.hasOwnProperty(key)) { 
            const reducer = reducers[key];
            newState[key] = reducer(state[key], action);
          }
        }
        return newState; //返回状态
      }
    }

*  bindActionCreators.js

export default function (actionCreators, dispatch) { 
      if (typeof actionCreators === "function") { 
        return getAutoDispatchActionCreator(actionCreators, dispatch);
      }
      else if (typeof actionCreators === "object") { 
        const result = { }; //返回结果
        for (const key in actionCreators) { 
          if (actionCreators.hasOwnProperty(key)) { 
            const actionCreator = actionCreators[key]; //取出对应的属性值
            if (typeof actionCreator === "function") { 
              result[key] = getAutoDispatchActionCreator(actionCreator, dispatch);
            }
          }
        }
        return result;
      }
      else { 
        throw new TypeError("actionCreators must be an object or function which means action creator")
      }
    }
    
    /** * 得到一个自动分发的action创建函数 */
    function getAutoDispatchActionCreator(actionCreator, dispatch) { 
      return function (...args) { 
        const action = actionCreator(...args)
        dispatch(action);
      }
    }

*  compose.js

export default function compose(...funcs) { 
      if (funcs.length === 0) { 
        return args => args; //如果没有要组合的函数，则返回的函数原封不动的返回参数
      }
      else if (funcs.length === 1) { 
        //要组合的函数只有一个
        return funcs[0];
      }
    
      return funcs.reduce((a, b) => (...args) => a(b(...args)))
    
      // return function (...args) { 
      // let lastReturn = null; //记录上一个函数返回的值，它将作为下一个函数的参数
      // for (let i = funcs.length - 1; i >= 0; i--) { 
      // const func = funcs[i];
      // if (i === funcs.length - 1) {//数组最后一项
      // lastReturn = func(...args)
      // }
      // else { 
      // lastReturn = func(lastReturn)
      // }
      // }
      // return lastReturn;
      // }
    }

*  applyMiddleware.js

import compose from "./compose"
    /** * 注册中间件 * @param {...any} middlewares 所有的中间件 */
    export default function (...middlewares) { 
      return function (createStore) {  //给我创建仓库的函数
        //下面的函数用于创建仓库
        return function (reducer, defaultState) { 
          //创建仓库
          const store = createStore(reducer, defaultState);
          let dispatch = () => {  throw new Error("目前还不能使用dispatch") };
          const simpleStore = { 
            getState: store.getState,
            dispatch: store.dispatch
          }
          //给dispatch赋值
          //根据中间件数组，得到一个dispatch创建函数的数组
          const dispatchProducers = middlewares.map(mid => mid(simpleStore));
          dispatch = compose(...dispatchProducers)(store.dispatch);
          return { 
            ...store,
            dispatch
          }
        }
      }
    }