最近看redux原理，發(fā)現(xiàn)沒(méi)有想象中的難以理解，在這里進(jìn)行總結(jié)交流一下，為便于理解，以下源碼做了部分簡(jiǎn)化。

具體代碼與詳細(xì)介紹參見(jiàn)：https://github.com/dishui1238/react-redux-demo

1. 前言

首先，思考下以下函數(shù)如果想要順序輸出 1，2，3，應(yīng)該如何處理？

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

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

對(duì)于方法二可以寫(xiě)一個(gè)通用函數(shù)，可以稱(chēng)作聚合函數(shù)，這樣就保證了函數(shù)的順序執(zhí)行。

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)();

這個(gè)函數(shù)在 redux 中的 applyMiddleware實(shí)現(xiàn)時(shí)會(huì)用到，可以保證中間件的順序執(zhí)行。

2. 分析Redux

這部分需要對(duì) Redux 有一定了解，如果你沒(méi)使用過(guò) Redux ，請(qǐng)先查閱相關(guān)文章。

Redux 是 JavaScript 的應(yīng)用狀態(tài)容器，它需要以下幾個(gè)功能：

• 需要一個(gè)數(shù)據(jù)源—— store 來(lái)存儲(chǔ)數(shù)據(jù)
• 需要reducer 初始化 state 并定義 state 修改規(guī)則
• 如果想要對(duì)數(shù)據(jù)進(jìn)行修改，需要一個(gè) dispatch 發(fā)起 action
• action 提交到 reducer 函數(shù)里，根據(jù)傳?的 action 的 type，返回新的 state
• Redux 只是個(gè)純粹的狀態(tài)管理?，默認(rèn)只支持同步，如果要處理異步，需要使用中間件

3. createStore 的實(shí)現(xiàn)

在使用 createStore 后，可以從返回值中獲取 getState()，dispatch()，subscribe() 方法，即該函數(shù)返回 getState、dispatch、subscribe函數(shù)，接收reducer，applyMiddleware() 的返回值 作為參數(shù)。

/**
需要實(shí)現(xiàn)以下功能：
1. 存儲(chǔ)狀態(tài) state
2. 獲取狀態(tài) getState
3. 更新?tīng)顟B(tài) dispatch
4. 變更訂閱 subscribe: 通過(guò) subscribe 在 store 上添加一個(gè)監(jiān)聽(tīng)函數(shù)。每當(dāng)調(diào)用 dispatch 方法時(shí)，會(huì)執(zhí)行所有的監(jiān)聽(tīng)函數(shù)
5. 應(yīng)用中間件，即 applyMiddleware()
*/

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

// enhancer（可以叫做強(qiáng)化器）是一個(gè)函數(shù)，這個(gè)函數(shù)接受一個(gè)「普通 createStore 函數(shù)」作為參數(shù)，返回一個(gè)「加強(qiáng)后的 createStore 函數(shù)」。這個(gè)加強(qiáng)的過(guò)程中做的事情，其實(shí)就是改造dispatch，添加上中間件。
  // redux 提供的 applyMiddleware() 方法返回的就是一個(gè) enhancer。

  if (enhancer) {
   // 返回加強(qiáng)后的 createStore 函數(shù)
    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一個(gè)用于初始化的 action，相當(dāng)于調(diào)用一次 reducer
  dispatch({
    type: "@MYREDUX/SOURCECODE",
  });

 return {
    getState,
    dispatch,
    subscribe,
  };
}

4. applyMiddleware 的實(shí)現(xiàn)

applyMiddleware 是用來(lái)改造 store 自帶的 dispatch 方法。action 發(fā)生后，先給中間件處理，最后再dispatch一個(gè)action交給reducer去改變狀態(tài)

export function applyMiddleware(...middlewares) {
  // applyMiddleware 調(diào)用時(shí)，返回一個(gè)函數(shù) A。
  // 這個(gè)函數(shù) A 接受一個(gè)函數(shù)形式的參數(shù) createStore，返回函數(shù) B。
  // 函數(shù) B 可以調(diào)用 createStore 函數(shù)，生成 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 是一個(gè)層層包裹的匿名函數(shù)，也叫函數(shù)柯里化，可以層層調(diào)用，逐漸求值，有需要的小伙伴可以做進(jìn)一步了解，這里不做介紹。

5. thunk 中間件實(shí)現(xiàn)

  function thunk({ dispatch, getState }) {
    return (dispatch) => (action) => {
      if (typeof action === "function") {
        // 處理異步請(qǐng)求
        return action(diapatch, getState);
      }
      return dispatch(action);
    };
  }

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

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

6. 總結(jié)

redux 原理好像并不難理解，但是其中的函數(shù)處理方式確實(shí)短小精悍，著實(shí)驚人，希望通過(guò)不斷的學(xué)習(xí)，自己也能寫(xiě)出如此優(yōu)秀的代碼。