部门自研的封装redux的状态管理工具， 源码解析！

前言

实现功能类似 dva、nuomi 的状态管理工具，生产环境可用

整体架构如下：

• redux 不用说了，难用的一批，模板代码太多了
• 在我们开始讲封装之前，我们必须要懂redux源码，我会带大家从小白的角度，通俗写一个redux出来，尤其你不理解中间件的写法，你自己就没办法去写拓展的中间件
• 因为我们的代码里面自带了异步场景的处理中间件，而且还加入了plugin机制，比dva的更合理，目前加入了loading中间件，每次发异步请求都会自带loading状态，比如请求前是true，请求结束为false
• 这个管理工具不跟单纯的增强redux，不跟任何比如react-redux，react-router有耦合

简易版redux几句话说清楚

redux本质是个啥东西呢，很简单，就是我们需要一个数据仓库，也就是store，我们把数据输入，然后经过修改，产生新的store。来举个例子

假如：store是{ count: 0 }

action(其实就是一个对象，比如 { type: 'inc', payload: 1 })

 ↓
 
然后处理数据 把store和action放入下面的函数处理
function reducer(store, action) {
    if(action,type === 'inc'){
        return { ...store, count: store.count + 1 }
    }
}
所以就是调用reducer(store, action)
 ↓
 
 然后store更新为{ count: 1 }

这就是redux核心流程, 很容易理解吧。

所以一个最简单的redux就可以这样实现

class redux{
    constructor(reducer, store){
        this.store = store;
        this.reducer = reducer;
    }
    dispatch(action){
        this.store = this.reducer(this.store, action);
    }
    getStore(){
        return this.store;
    }
    createStore(){
        return ({
            dispatch,
            getStore
        })
    }
}

redux还有一个发布订阅的小功能，我们也加上，发布订阅说白了，一个很简单的实现我们立马就懂了，一个数组存一个函数，叫发布，这个函数被调用，就是订阅

const listeners = [];
listeners.push(()=>{ console.log('我被订阅了！') })

以上代码就是发布订阅的发布，发布了一个事件()=>{ console.log('我被订阅了！') }等着被订阅，

所以订阅就很简单了

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

所以我们按照这个思路给redux加上发布订阅功能：

class redux{
    constructor(reducer, initStore){
        this.store = initStore;
        this.reducer = reducer;
        this.listeners = [];
    }
    dispatch = (action) => {
        this.store = this.reducer(this.store, action);
        for(let i = 0; i < this.listeners.length; i++){
            this.listeners[i]();
        }
    }
    getStore = () => {
        return this.store;
    }
    subscribe = (listener) => { 
        this.listeners.push(listener); 
    }
    createStore = () => {
        return ({
            subscribe: this.subscribe,
            dispatch: this.dispatch,
            getStore: this.getStore
        })
    }
}

好了你可以尝试用一下：

const reducer = function(store, action) {
    if(action,type === 'inc'){
        return { ...store, count: store.count + 1 }
    }
    return store;
}
const { subscribe, dispatch, getStore } = new redux(reducer, {count: 0}).createStore()

dispatch({ type: 'inc', payload: 1 })

getStore() // { count: 1 }

redux只不过还支持多个store合并还有多个reducer合并，其他就没啥了，我们先解决多个store，首先，我们这里传入了store的初始值 { count: 0 }，如果我们传，怎么让其初始化为 { count: 0 },我们一般reducer这样写

const reducer = function(store = { count: 0 }, action) {
    if(action?.type === 'inc'){
        return { ...store, count: store.count + 1 }
    }
    return store;
}

如果我们默认让这个reducer执行一下，是不是store就帮我们初始化了，所以我们可以这么做,

class redux{
    constructor(reducer, initStore){
        this.store = store;
        this.reducer = reducer;
        this.listeners = [];
        this.dispatch({ type: Symbol() })
    }
    dispatch = (action) => {
        this.store = this.reducer(this.store, action);
        for(let i = 0; i < this.listeners.length; i++){
            this.listeners[i]();
        }
    }
   ...其他代码
}

this.dispatch({ type: Symbol() })这一句话让reducer匹配不到任何数据返回store，而store就是默认{ count: 0 }

好了，我们来测试一下代码

class redux{
    constructor(reducer, initStore){
        this.store = initStore;
        this.reducer = reducer;
        this.listeners = [];
        this.dispatch({ type: Symbol() })
    }
    dispatch = (action) => {
        this.store = this.reducer(this.store, action);
        for(let i = 0; i < this.listeners.length; i++){
            this.listeners[i]();
        }
    }
    getStore=() => {
        return this.store;
    }
    subscribe = (listener) => { 
        this.listeners.push(listener); 
    }
    createStore = () => {
        return ({
            subscribe: this.subscribe,
            dispatch: this.dispatch,
            getStore: this.getStore
        })
    }
}
// 这里用var只是为了自己浏览器调试
var reducer = function(store = { count: 0 }, action) {
    if(action?.type === 'inc'){
        return { ...store, count: store.count + 1 }
    }
    return store;
}

new redux(reducer).createStore().getStore(); // { count: 0 }

好了，我们再把多个reducer加上，有一个combineReducer的函数，可以合并多个reducer，我们看看如何实现：

假如我们要合并两个reducer，名为reducer1和reducer2，如下：

var reducer1 = function(store = { count: 0 }, action) {
    if(action?.type === 'inc'){
        return { ...store, count: store.count + 1 }
    }
    return store;
}

var reducer2 = function(store = { name: 'zs' }, action) {
    if(action?.type === 'changeName'){
        return { ...store, name: store.name }
    }
    return store;
}

var reducer = combineReducers({
    count: reducer1,
    person: reducer2
});

原理很简单，我们有多个reducer,只要把每个reducer都调用一遍，是不是就能找到对应的action了，我们来看看combineReducers的实现：

function combineReducers(reducers) {

  // reducerKeys = ['count', 'person']
  // 获取每个reducer的key，因为store的key也会与之对应
  const reducerKeys = Object.keys(reducers)

  // 合并后新的reducer
  return function combination(store = {}, action) {
    // 新的store
    const nextstore = {}

    // 遍历所有reducer，生成新的store
    for (let i = 0; i < reducerKeys.length; i++) {
      const key = reducerKeys[i]
      const reducer = reducers[key]
     
      // reducer的key对应的store的，初始化的时候为undefined
      const previousstore = store[key]
      
      // 把action放到每个reducer里去执行
      const nextstoreForKey = reducer(previousstore, action)
      
      // 得到新的store
      nextstore[key] = nextstoreForKey
    }
    return nextstore;
  }
}

好了，我们测试一下：

new redux(reducer).createStore().getStore(); 
// { count: {count: 0}, person: {name: 'zs'} }

最后我们把中间件系统搞定了,redux中间件系统是其中最复杂的，虽然代码量只有几行。

我们来思考一个问题，store.dispatch,是一个同步函数，并且这个dispatch，直接就触发了store的改变，我们如何能拓展这个函数，比如在dispatch前打印一下时间，在dispatch后打印下时间

你马上会说，这还不简单，直接打印时间不就完事了，是的，你回答的没错，但是我还想加一些功能呢，也就是说能不能让打印时间的函数作为一种插件，把整个dispatch函数改造成一个函数链条，比如action来了，先调用插件a函数，再调用插件b函数。。。以此类推，最后调用dispatch函数

代码如下，可能不太好理解

export default function compose(...funcs) {
  if (funcs.length === 1) {
    return funcs[0]
  }
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

我们的插件函数怎么写呢

// 我们写一个日志插件
const logger = (store) => (next) => (action) => {
    伪代码 dispatch调用前的日志处理
    next(action)
    伪代码 dispatch调用后的日志处理
}

你写redux插件的话，格式也必须是这样的，3个参数分别单次传入。

• 第一个是store
• 第二个是next，也就是dispatch
• 第三个是action

这里不理解没关系，直接跳过就行了，只是给有余力的研究的同学学习。

const { getStore, dispatch } = new redux(reducer).createStore();

getStore(); 
// { count: {count: 0}, person: {name: 'zs'} }

const logger1 = (store) => (next) => (action) => {
    console.log('log1开始')
    next(action)
    console.log('log1结束')
}

const logger2 = (store) => (next) => (action) => {
    console.log('log2开始')
    next(action)
    console.log('log2结束')
}
const store = getStore();
const middlewares = [logger1, logger2];
function compose(...funcs) {
  if (funcs.length === 1) {
    return funcs[0]
  }
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
const chain = middlewares.map(middleware => middleware(store));

let newDispatch = compose(...chain)(dispatch);

测试：

newDispatch({ type: 'a' })
// log1开始
// log2开始
// log2结束
// log1结束

我们再理一下啊，我们本来是一个函数包装dispatch是这样的

const logger1 = (dispatch) => (action) => {
    console.log('log1开始')
    dispatch(action)
    console.log('log1结束')
}

如果再加入一个中间件的话，我们如何处理，保留上面的 dispatch(action)

const logger2 = (logger1) => (action) => {
    console.log('log1开始')
    logger1(action)
    console.log('log1结束')
}

是不是，logger2(logger1(dispatch)),就可以了。

实现更好的redux的状态管理工具

我们看如何使用我们的工具，下面的代码我们注册了一个model，然后启动

// 注册的方法
HbDva.addModel({
  // scope，每个模块的名称
  namespace: 'app',
  // 每个模块的初始化数据
  state: {
    count: 0
  },
  // 跟redux的reducer一个用法
  reducers: {
    increment(state) {
      return { count: state.count + 1 }
    },
    decrement(state) {
      return { count: state.count - 1 }
    }
  },
  // 处理副作用的代码，外部的dispatch调用会返回promise
  // 例如dispatch({ type: 'app/incrementAsync' }).then(xxx)
  effects: {
    async incrementAsync(data, dispatch) {
      await new Promise((resolve) => {
        setTimeout(() => {
          resolve()
        }, 1000)
      })
      dispatch({ type: 'app/increment' })
    }
  }
})

// 启动创建store和注册plugin
HbDva.start()

使用方法：

// 异步调用
dispatch({ type: 'app/incrementAsync' }).then(xxx)

// 同步调用
dispatch({ type: 'app/increment' })

源码我们从createStore开始

  start() {
      // 注册middleware，来源于我们的注册到plugin的middleware
      // plugin机制后面讲，这里忽略
    const middles = this.plugin
      .get<IMiddlewares>(MIDDLEWARES)
      .map((middleware) => middleware({ effects: this.effects }));
      // 合并所有addModel，也就是注册model的reducer
    const reducer = this.getReducer();
    // 合并middleware，稍后讲asyncMiddeWare的实现
    this.store = applyMiddleware(...middles, this.asyncMiddeWare())(createStore)(reducer);
  }

我们先看如何注册model

class HbDva {
  // 存放所有model
  _models: IModel[];

  // createStore的结果
  store: Store | {};

  // 额外需要加载的plugin
  plugin: Plugin;
    
  // 存放所有副作用的reducer
  effects: IEffects;

  constructor(plugin: Plugin) {
    this._models = [];
    this.store = {};
    this.effects = {};
    this.plugin = plugin;
  }

  /**
   * 注册model的方法
   * @param m model
   */
  addModel(model: IModel) {
    // 将model的reducer和effects加上scope
    const prefixmodel = this.prefixResolve(model);
    this._models.push(prefixmodel);
  }
}

addModel的时候，我们会把所有的model中reducer和effects的名字加上namespace，也就是scope,prefixResolve的实现如下：

关键代码就是addPrefix，把比如

  namespace: 'app',
  reducers: {
    increment(state) {
      return { count: state.count + 1 }
    },
    decrement(state) {
      return { count: state.count - 1 }
    }
  },

变为:

  reducers: {
    'app/increment'(state) {
      return { count: state.count + 1 }
    },
    'app/decrement'(state) {
      return { count: state.count - 1 }
    }
  },

effects同理，也是加了namespace。源码如下：

  /**
   * prefixResolve 将model的reducer和effects加上scope
   */
  prefixResolve(model: IModel) {
    if (model.reducers) {
      model.reducers = this.addPrefix(model.reducers, model.namespace);
    }
    if (model.effects) {
      model.effects = this.addPrefix(model.effects, model.namespace);
    }
    this.addEffects(model.effects || {});
    return model;
  }

  addEffects(effects: IEffects) {
    for (const [key, value] of Object.entries(effects)) {
      this.effects[key] = value;
    }
  }
  addPrefix(obj: IModel['reducers'] | IEffects, namespace: string) {
    return Object.keys(obj).reduce((prev, next) => {
      prev[`${namespace}/${next}`] = obj[next];
      return prev;
    }, {});
  }

我们来看如何合并reducer

  /**
   *
   * @returns 将全部reducer合并为一个reducer
   */
  getReducer(): reducer {
    const reducers: IModel['reducers'] = {};
    for (const m of this._models) {
      // m是每个model的配置
      reducers[m.namespace] = function (state: Record<string, any> = m.state, action: IAction) {
        // 组织每个模块的reducer
        const everyreducers = m.reducers; // reducers的配置对象，里面是函数
        const reducer = everyreducers[action.type]; // 相当于以前写的switch
        if (reducer) {
          return reducer(state, action);
        }
        return state;
      };
    }
    const extraReducers = this.plugin.get<IExtraReducers>(EXTRA_REDUCER);
    return combineReducers<Record<string, any>>({
      ...reducers,
      ...extraReducers,
    }); // reducer结构{reducer1:fn,reducer2:fn}
  }

很简单吧，我们接着看asyncMiddleware如何实现：

  asyncMiddeWare(): Middleware {
    return ({ dispatch, getState }) => {
      return (next) => async (action) => {
        if (typeof this.effects[action.type] === 'function') {
          return this.effects[action.type](action.data, dispatch, getState);
        }
        return next(action);
      };
    };
  }

关键代码就是

if (typeof this.effects[action.type] === 'function') {
          return this.effects[action.type](action.data, dispatch, getState);
        }

如果我判断你是effects，那么我不会直接next(action)，而是调用effects，把action的信息传入进去，原生的dispatch让用户自己去调用。

Plugin机制

源码如下：

import { IHooks, IPluginKey } from './definitions';
import { EXTRA_REDUCER, MIDDLEWARES } from './constants';

export default class Plugin {
  hooks: IHooks;

  constructor() {
    // 初始化把钩子都做成数组
    this.hooks = { [MIDDLEWARES]: [], [EXTRA_REDUCER]: [] };
  }

  use(plugin: Record<IPluginKey, any>) {
    // 因为会多次use，所以就把函数或者对象push进对应的钩子里
    const { hooks } = this;
    for (const key in plugin) {
      hooks[key].push(plugin[key as IPluginKey]);
    }
  }

  get<T extends keyof IHooks>(key: T): IHooks[T] {
    // 不同的钩子进行不同处理
    if (key === EXTRA_REDUCER) {
      // 处理reducer，就把所有对象并成总对象，这里只能是对象形式才能满足后面并入combine的操作。
      return Object.assign({}, ...this.hooks[key]);
    }
    if (key === MIDDLEWARES) {
      return this.hooks[key]; // 其他钩子就返回用户配置的函数或对象
    }
  }
}

意思是new plugin的时候，我们就保存里一个plugin的数据仓库，内容是

{
    middlewares: [], // 存放所有的拓展的middleware
    extraReducers: [], // 存放额外的reducer
}

我们写一个loadingPlugin，如下：

import { Middleware } from 'redux';
import { HIDE, NAMESPACE, SHOW } from './constants';
import { reducer } from './definitions';

export default function createLoading() {
  const initalState: Record<string, any> = {
    effects: {}, // 用来收集每个namespace下的effects是true还是false
  };
  const extraReducers: { [NAMESPACE]: reducer } = {
    // 这里直接把写进combineReducer的reducer准备好，键名loading
    [NAMESPACE](state = initalState, { type, payload }) {
      const { actionType } = payload || {};
      switch (type) {
        case SHOW:
          return {
            effects: {
              ...state.effects,
              [actionType]: true,
            },
          };
        case HIDE:
          return {
            effects: {
              ...state.effects,
              [actionType]: false,
            },
          };
        default:
          return state;
      }
    },
  };

  const middleware: (...args: any[]) => Middleware =
    ({ effects }) =>
    ({ dispatch }) => {
      return (next) => async (action) => {
        if (typeof effects[action.type] === 'function') {
          dispatch({ type: SHOW, payload: { actionType: action.type } });
          await next(action);
          dispatch({ type: HIDE, payload: { actionType: action.type } });
        }
        return next(action);
      };
    };
  return {
    middlewares: middleware,
    extraReducers,
  };
}

关键代码

dispatch({ type: SHOW, payload: { actionType: action.type } });

这样就把loading的reducer状态置为true，你就能从store取到，同理

 dispatch({ type: HIDE, payload: { actionType: action.type } });

这个是请求回来了，我再置为false

本文结束！