Redux 实现过程的推演

2022-12-05 10:56:15

这是一篇浅入浅出的 Redux 实现过程的推演笔记！正常来说应该是要从源码下手开始解析，这里是逆向推演，假如有需求是要这么一个东西，那么该如何从零开始实现？

通过该笔记，更多的是希望自己能够多熟悉从无到有的开发思维，而非源码解析这种从有到有的*思维。

Rudex 介绍

首先确认目标，要写个什么样的东西。

官宣：A predictable state container for JavaScript apps. JavaScript 应用程序中可预测的状态容器。

通过这句话，挖掘一些关键点：

1. 要有个状态：state
1. 要有个(状态)容器：store
1. 在状态改变的流程中，状态是可预测的，即：
- 3.1 何时触发状态进行改变？ dispatch，触发 state 的改变
- 3.2 触发了什么改变？ action，描述 state 该做什么修改
- 3.3 状态做什么样改变？ reducer，描述 state 的改变过程，传入改变前的 state，返回改变后的 state

reducer 是个纯函数很重要，能够消除其他影响让 state 的变化真正是可预测的。

有了这些关键点，接下来就是实现了

Redux 实现

注意，被控对象(state)被包含在整个链路中，我们关心链路即可

/*
 * createStore 状态容器
 * @param reducers 容器总得需要知道是做什么样的改变
 * @param initialState 初始化(预置)的 state
 */

const createStore = (reducers, initialState) => {
  // 通过 reducer 取到改变后的值，重新存储
  let currentReducer = reducers;

  // 存
  let currentState = initialState;

  // 取
  const getState = () => {
    return currentState;
  };

  // 改
  const dispatch = action => {
    currentState = currentReducer(currentState, action);
    return action;
  };

  // 这里可能还需要可被观察的，留坑、不实现，有兴趣的看文章后的源码阅读链接
  return {
    getState,
    dispatch
  };
};

至此，容器部分完成。

接下来看改变流程可预测的实现：

action 描述 state 该做什么修改，这仅仅是个对象而已，我们仅需要定义好格式，如下例子(比如数字的重置)

/*
 * action
 * @property type 描述需要做什么操作
 * @property preload 预加载数据，包含 state 的新值
 */

const RESET = "RESET";
const RESET_ACTION = {
  type: RESET,
  preload: {
    count: 0
  }
};

reducer 描述状态做了什么改变？

/*
 * reducer
 * @currentState 当前的 state，旧值
 * @action 该做什么修改的类型描述
 */

const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case RESET: {
      return {
        ...state,
        ...action.preload
      };
    }
    default: {
      return state;
    }
  }
};

将上面三份代码合一起，试一试

const store = createStore(reducer);
store.dispatch({ type: RESET, preload: { count: 10 } });
store.getState(); // output { count: 10}
store.dispatch(RESET_ACTION);
store.getState(); // output { count: 0}

流程是正常了，但情况稍微有点不对，如果在 dispatch 之前去 getState，那么 state 是 {}，而不是给的初始值{count:0}

对于这点，只要在 createStore 时候的默认执行一次 dispatch，用以生成初始的 state tree

在 createStore 的 return 之前加入 dispatch

dispatch({ type: "@redux/INIT" });

ok，至此已经有个简版 redux 了(observable 和 subscribe 的话，加个 listeners，这里不多做介绍，有兴趣的点击文末链接)，但是 redux 还有 middleware 的功能(而且这部分代码会比这里好玩一点)，继续实现 middleware

Middleware 实现

首先，明确一下希望 middleware 能够做什么？

官方描述：

Middleware is the suggested way to extend Redux with custom functionality. Middleware lets you wrap the store's dispatch method for fun and profit. The key feature of middleware is that it is composable. Multiple middleware can be combined together, where each middleware requires no knowledge of what comes before or after it in the chain.

Middleware 是通过自定义功能来扩展 redux 的推荐方法，它能够让你有效的包裹 store 的 dispatch 方法已达到所需的目的，其关键特征在于组合，多个 middleware 能够进行组合，每个 middleware 都是独立的，它们不需要知道在流程的之前或之后会发生什么。

从上面的描述中，得出结论：

首先，middleware 要是个 function 且该函数对 dispatch 的执行做包裹；
然后，每个 middleware 互不相干且可组合的；
最后,值得注意的是 middleware 内部能够访问及操作 state，不然只能做些和 state 不相干的事情，那这个扩展的意义就不大了。

接下来是推演实现的过程：

首先，我们需要考虑的是怎么处理每个函数，让其既是独立的，又是可组合的，而且内部还得包裹 dispatch。看下面的思考过程：

比如我有个函数 a 和函数 dispatch 我们希望执行的过程是 dispatch 被包裹在 a 内部执行，首先想到的肯定是 callback 形式，没毛病，看代码

var a = function(next) {
  console.log("a-before");
  next();
  console.log("a-after");
};
var dispatch = function(action) {
  console.log("do ", action);
  return action;
};

a(dispatch);
// output:
// a-before
// do undefined
// a-after

但是没有能够把 dispatch 的参数传进去呀，于是对于内部函数的传参，不陌生的，我们又想到，外包再套一层 function，闭包存参(用 jqyery 的时候绑定事件没少这么干吧)，看代码：

var a = function(next) {
  return function(action) {
    console.log("a-before");
    next(action);
    console.log("a-after");
  };
};
var dispatch = function(action) {
  console.log("do ", action);
  return action;
};

a(dispatch)("test action");
// output:
// a-before
// do test action
// a-after

但如果 a 的这种类型的包裹函数是多个的，试下加个函数 b，因为要嵌套的是函数，所以将 action 作为第二次执行的参数

var a = function(next) {
  return function(action) {
    console.log("a-before");
    next(action);
    console.log("a-after");
  };
};
var b = function(next) {
  return function(action) {
    console.log("b-before");
    next(action);
    console.log("b-after");
  };
};
var dispatch = function(action) {
  console.log("do ", action);
  return action;
};

a(b(dispatch))("test action");
// output:
// a-before
// b-before
// do test action
// b-after
// a-after

然后问题又来了，我们要再加个函数 c，难道让我写 a(b(c(dispacth)))(action)？

既然函数 a, b, c 都是一种类型的东西，可以格式化成数组，回想一下什么方法能够依次组合数组的每一项。没错，是 reduce，继续看代码:

var a = function(next) {
  return function(action) {
    console.log("a-before");
    next(action);
    console.log("a-after");
  };
};
var b = function(next) {
  return function(action) {
    console.log("b-before");
    next(action);
    console.log("c-after");
  };
};
var c = function(next) {
  return function(action) {
    console.log("c-before");
    next(action);
    console.log("c-after");
  };
};
var dispatch = function(action) {
  console.log("do ", action);
  return action;
};

var d = [a, b, c].reduce((pre, now) => (...args) => pre(now(...args)));

d(dispatch)("test action");
// output:
// a-before
// b-before
// c-before
// do test action
// c-after
// b-after
// a-after

好了，想到了如何将 middleware 串起来和如何将 dispatch 封装的方法后，集成到 redux 的代码里试试

单独抽一个 compose 函数用以处理一个或多个 middleware，代码如下：

const compose = (...funcs) => {
  if (funcs.length === 0) {
    return arg => arg;
  }

  if (funcs.length === 1) {
    return funcs[0];
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)));
};

修改 createStore 里的 dispatch 方法，让其支持当存在 middleware 的时候，dispatch 需要被重写。代码如下：

/*
 * createStore 状态容器
 * @param reducers 容器总得需要知道是做什么样的改变
 * @param initialState 初始化(预置)的 state
 * @param enhancer 扩展的 middlewares
 */

const createStore = (reducers, initialState, enhancer) => {
  // 参数互换 如果 initialState 是个函数，enhancer = undefined 则 enhancer 和 initialState 互换
  if (typeof initialState === "function" && typeof enhancer === "undefined") {
    enhancer = initialState;
    initialState = undefined;
  }

  // 如果有 middleware 的时候，则 createStore 稍后处理，处理详情参照 applyMiddleware 函数
  if (typeof enhancer !== "undefined" && typeof enhancer === "function") {
    // 为什么是这样写？ 继续往下看
    return enhancer(createStore)(reducer, initialState);
  }

  // ...
  // 之前的代码
};

结合 createStore，注意到前文提出的，middleware 内部支持访问和操作 state，我们需要实现 createStore 里面的 enhancer 函数，就是函数 applyMiddleware，于是给出代码：

/*
 * applyMiddleware 实现中间件的应用
 * @param ...middlewares 插入的 state 处理流程的中间件
 */
const applyMiddleware = (...middlewares) => {
  // 传入 middlewares
  return createStore => (...args) => {
    const store = createStore(...args);
    // middleware 内部能做的 state 操作
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    };
    // 将 middleware 处理，以 middlewareAPI 作为参数执行并且取到 middleware 的内部函数
    const chain = middlewares.map(middleware => middleware(middlewareAPI));
    // 进行 compose 组合
    // 如存在 3 个 middleware A(ABefore,AAfter) B(BBefore,BAfter) C(CBefore,CAfter)
    // 则执行顺序是 ABefore - BBefore - CBefore - (真实的操作) - CAfter - BAfter - AAfter
    dispatch = compose(...chain)(store.dispatch);

    return {
      ...store,
      dispatch
    };
  };
};

核心实现的代码写完了，然后测试一下？

我们需要在 createStore 的 dispatch 里加个 "do dispatch" 的 log，方便看执行流程

const store = createStore(reducer, applyMiddleware(logger));

再写 middleware 的函数，

const logger = ({ getState }) => {
  return next => action => {
    console.log("will dispatch", action);

    const returnValue = next(action);

    console.log("state after dispatch", getState());

    return returnValue;
  };
};
store.dispatch(RESET_ACTION);
// output
// will dispatch {type: "RESET", preload: {…}}
// do dispatch
// state after dispatch {count: 0}

好了，来回顾一下实现过程，首先有个目标：做一个可预测的状态容器；然后分析目标，挖掘关键点，依次实现。实现的过程更多在于"容器操作的规范"，技术方面好像确实都是一些 js 基础知识的运用。

注意，本文仅解析 redux 的实现思路，代码与源码并不完全相同。redux 不止这些代码(但其实也没多少其余代码)，还有一些断言、错误提示、开发提示、bindActionCreators 啥的操作等等...

源码笔记链接

码农公寓

Rudex 介绍

Redux 实现

Middleware 实现

相关文章