Redux原理

最近看redux原理，发现没有想象中的难以理解，在这里进行总结交流一下，为便于理解，以下源码做了部分简化。

1. 前言

首先，思考下以下函数如果想要顺序输出 1，2，3，应该如何处理？

function f1() {
  console.log("1");
}
function f2() {
  console.log("2");
}
function f3() {
  console.log("3");
}

方法一： f1();f2();f3();
方法二：f3(f2(f1()))

对于方法二可以写一个通用函数，可以称作聚合函数，这样就保证了函数的顺序执行。

function compose(...funcs) {
  const len = funcs.length;
  if (len === 0) {
    return (arg) => arg;
  }
  if (len === 1) {
    return funcs[0];
  }
  return funcs.reduce((left, right) => (...args) => right(left(...args)));
}

compose(f1, f2, f3)();

这个函数在 redux 中的 applyMiddleware实现时会用到，可以保证中间件的顺序执行。

2. 分析Redux

这部分需要对 Redux 有一定了解，如果你没使用过 Redux ，请先查阅相关文章。

Redux 是 JavaScript 的应用状态容器，它需要以下几个功能：

• 需要一个数据源—— store 来存储数据
• 需要reducer 初始化 state 并定义 state 修改规则
• 如果想要对数据进行修改，需要一个 dispatch 发起 action
• action 提交到 reducer 函数里，根据传⼊的 action 的 type，返回新的 state
• Redux 只是个纯粹的状态管理器，默认只支持同步，如果要处理异步，需要使用中间件

3. createStore 的实现

在使用 createStore 后，可以从返回值中获取 getState()，dispatch()，subscribe() 方法，即该函数返回 getState、dispatch、subscribe函数，接收reducer，applyMiddleware() 的返回值 作为参数。

/**
需要实现以下功能：
1. 存储状态 state
2. 获取状态 getState
3. 更新状态 dispatch
4. 变更订阅 subscribe: 通过 subscribe 在 store 上添加一个监听函数。每当调用 dispatch 方法时，会执行所有的监听函数
5. 应用中间件，即 applyMiddleware()
*/

export function createStore(reducer, enhancer) {
  let state = undefined;
  let listeners = [];

// enhancer（可以叫做强化器）是一个函数，这个函数接受一个「普通 createStore 函数」作为参数，返回一个「加强后的 createStore 函数」。这个加强的过程中做的事情，其实就是改造dispatch，添加上中间件。
  // redux 提供的 applyMiddleware() 方法返回的就是一个 enhancer。

  if (enhancer) {
   // 返回加强后的 createStore 函数
    return enhancer(createStore)(reducer);
  }

   function getState() {
    return state;
    }
    function dispatch(action) {
      state = reducer(state, action);
      listeners.forEach((func) => func());
    }
    function subscribe(listener) {
     listeners.push(listener);
    }

  // dispatch一个用于初始化的 action，相当于调用一次 reducer
  dispatch({
    type: "@MYREDUX/SOURCECODE",
  });

 return {
    getState,
    dispatch,
    subscribe,
  };
}

4. applyMiddleware 的实现

applyMiddleware 是用来改造 store 自带的 dispatch 方法。action 发生后，先给中间件处理，最后再dispatch一个action交给reducer去改变状态

export function applyMiddleware(...middlewares) {
  // applyMiddleware 调用时，返回一个函数 A。
  // 这个函数 A 接受一个函数形式的参数 createStore，返回函数 B。
  // 函数 B 可以调用 createStore 函数，生成 store 并且返回。
  return (createStore) => (...args) => {
    const store = createStore(...args);
    let dispatch = store.dispatch;

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args),
    };

    // chain = [logger({getState, dispatch}), thunk({getState, dispatch})]
    const chain = middlewares.map((middleware) => middleware(middlewareAPI));
    // dispatch = thunk({getState, dispatch})(logger({getState, dispatch})])(dispatch)
    dispatch = compose(...chain)(store.dispatch);
    return { ...store, dispatch };
  };
}

function 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)));
}

applyMiddleware 是一个层层包裹的匿名函数，也叫函数柯里化，可以层层调用，逐渐求值，有需要的小伙伴可以做进一步了解，这里不做介绍。

5. thunk 中间件实现

  function thunk({ dispatch, getState }) {
    return (dispatch) => (action) => {
      if (typeof action === "function") {
        // 处理异步请求
        return action(diapatch, getState);
      }
      return dispatch(action);
    };
  }

可以推断出适用于 thunk 的 action 是什么形式，比如：

asyncAdd = () => {
    store.dispatch((dispatch) => {
      setTimeout(() => {
        store.dispatch({ type: "add" });
      }, 1000);
    });
  };

6. 总结

redux 原理好像并不难理解，但是其中的函数处理方式确实短小精悍，着实惊人，希望通过不断的学习，自己也能写出如此优秀的代码。