Redux 原理分析，中间件机制函数合成

import logger from "redux-logger";
import { createStore, combineReducers, applyMiddleware } from "redux";

// import logger1 from "../middleware/redux-logger-1";
// import logger2 from "../middleware/redux-logger-2";
// import { createStore, combineReducers, applyMiddleware } from "../redux/index";

// reducer 接受一个 state，更具 action 返回新的 state 。
const countReducer = (state = 0, { type, payload = 1 }) => {
  // console.log("2、reducer---处理state");
  switch (type) {
    case "ADD":
      return state + payload;
    case "MINUS":
      return state - payload;
    default:
      return state;
  }
};

const store = createStore(countReducer));

export default store;

// 创建一个函数，存储值、收集订阅、更新订阅。-- 观察者模式
export default function createStore(reducer) {
  let currentState;
  let currentListeners = [];

  // 获取当前的 state
  function getState() {
    return currentState;
  }

  // 提交 action 执行 reducer
  function dispatch(action) {
    // 执行自定义的 reducer，根据  action 获取新的值，通知所有的监听。
    currentState = reducer(currentState, action);
    currentListeners.forEach((listener) => listener());
    // 记住 dispatch 执行后返回的 action。
    return action;
  }

  // 添加订阅
  function subscribe(listener) {
    currentListeners.push(listener);
    // 返回用于取消订阅的方法
    return () => {
      const index = currentListeners.indexOf(listener);
      currentListeners.splice(index, 1);
    };
  }

  // 默认执行一次，触发下默认值
  dispatch({ type: "REUDX/DEFAULT" });

  return {
    getState,
    dispatch,
    subscribe,
  };
}

// 合成 reducer 把 多个 reducer 的执行结果，合并成一个对象整体返回。
export default function combineReducers(reducers) {
  return function combination(state = {}, action) {
    let nextState = {};

    // 当执行 大 reducer 时候，把所有 小 reducer 一起执行。
    for (let key in reducers) {
      const reducer = reducers[key];
      nextState[key] = reducer(state[key], action);
    }

    return nextState;
  };
}

createStore(combineReducers({ count: countReducer }));

function compose(...funcs) {
  return funcs.reduce(
    (a, b) =>
      (...args) =>
        a(b(...args))
  );
}
compose(f4, f3, f2, f1)("omg"); //f4(f3(f2(f1("omg"))));

// 把 dispatch 这个方法不断用高阶函数包装，最后返回一个强不断化过后的 dispatch，就是一层套一层。
export default function applyMiddleware(...middlewares) {
  // 在创建 createStore 的时候，发现有 middleware，走加强的逻辑。
  return (createStore) => (reducer) => {
    const store = createStore(reducer);

    // 待加强的 dispatch。
    let dispatch = store.dispatch;

    // 把获取值和原始 dispatch 存储起来。
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args),
    };

    // 生成一个中间件的链，给每个节点添加 middlewareAPI。
    // 第一阶函数将会获得 middlewareAPI。next => action => {}
    const middlewaresChain = middlewares.map((middleware) => middleware(middlewareAPI));

    // 包装层一个函数 从右到左执行 加强版的 dispatch，并将最初的 dispatch 传递给 compose。
    dispatch = compose(...middlewaresChain)(dispatch);

    // 最后返回加强过 dispatch 的对象。
    return {
      ...store,
      dispatch,
    };
  };
}

function compose(...funcs) {
  // 没有传入函数参数，就返回一个默认函数（直接返回参数）
  if (funcs.length === 0) {
    return (arg) => arg;
  }
  // 单元素数组时调用 reduce，会直接返回该元素，不会执行callback; 所以这里手动执行
  if (funcs.length === 1) {
    return funcs[0];
  }
  // 依次拼凑执行函数
  // compose(f4, f3, f2, f1)("omg")
  // reduce回调函数第一次执行时，返回值为 函数 (...args) => f4(f3(...args))，作为下一次执行的a参数
  // 回调函数第二次执行时，返回值为 函数(...args) => f4(f3(f2(...args))),作为下一次执行的a参数
  // 回调函数第三次执行时，返回值为 函数(...args) => f4(f3(f2(f1(...args))))
  return funcs.reduce(
    (a, b) =>
      (...args) =>
        a(b(...args))
  );
}

// 更新前输出值日志
export default function logger1({ getState }) {
  return function next1(next) {
    debugger;
    return function action1(action) {
      debugger;
      console.log(action.type + "执行了！--1");

      const prevState = getState();
      console.log("prev state", prevState);

      // 执行真正的 dispatch
      const returnValue = next(action);

      return returnValue;
    };
  };
}

// 更新后输出日志
export default function logger2({ getState }) {
  return function next2(next) {
    debugger;
    return function action2(action) {
      debugger;
      console.log(action.type + "执行了！--2");

      // 调用下一个中间件 logger1
      const returnValue = next(action);

      const nextState = getState();
      console.log("next state", nextState, returnValue);

      return returnValue;
    };
  };
}

createStore(combineReducers({ count: countReducer }), applyMiddleware(logger2, logger1));