Redux 是一个流行的 JavaScript 应用程序状态管理库，它使用单一的状态树来管理整个应用程序的状态，并采用了一些优秀的设计模式和技术来简化状态管理的复杂度。Redux 的核心是 createStore 函数，它是整个 Redux 库的入口点。在本文中，我们将深入分析 createStore 函数的源代码，以便更好地理解 Redux 的工作原理。
createStore 的基本用法
createStore 函数是 Redux 库的入口点，它用于创建一个 Redux store 对象。一个 Redux store 对象包含了整个应用程序的状态树，并且提供了一些 API 来更新状态树和订阅状态变化。createStore 函数的基本用法如下所示：
import { createStore } from 'redux';
const reducer = (state, action) => {
// reducer 的实现
};
const initialState = {};
const store = createStore(reducer, initialState);在上面的代码中，我们首先通过 import 语句引入了 Redux 库的 createStore 函数。然后，我们定义了一个 reducer 函数，它用于处理状态变化。reducer 函数接收两个参数：当前状态树和一个 action 对象，然后返回一个新的状态树。我们还定义了一个 initialState 对象，它是状态树的初始状态。最后，我们调用 createStore 函数来创建一个 Redux store 对象，并将 reducer 和 initialState 作为参数传递给它。
createStore 的源代码分析
下面是 createStore 函数的源代码：
-- -------------------- ---- -------
------ ------- -------- -------------------- --------------- --------- -
-- ------- -------------- --- ---------- -- ------ -------- --- ------------ -
-------- - ---------------
-------------- - ----------
-
-- ------- -------- --- ------------ -
-- ------- -------- --- ----------- -
----- --- --------------- --- -------- -- -- - ------------
-
------ ------------------------------ ----------------
-
-- ------- ------- --- ----------- -
----- --- --------------- --- ------- -- -- - ------------
-
--- -------------- - --------
--- ------------ - ---------------
--- ---------------- - ---
--- ------------- - -----------------
--- ------------- - ------
-------- ------------------------------ -
-- -------------- --- ----------------- -
------------- - -------------------------
-
-
-------- ---------- -
-- --------------- -
----- --- ---------- ------ ---- ---------- ----- --- ------- -- ---------- - -
---- --- -- ---------- -- ------ --- ----- ------ -- --- ---- ------- - -
------- --- -------- ------------
-
------ -------------
-
-------- ------------------- -
-- ------- -------- --- ----------- -
----- --- --------------- --- -------- -- -- - ------------
-
--- ------------ - -----
-------------------------------
-----------------------------
------ -------- ------------- -
-- --------------- -
-------
-
------------ - ------
-------------------------------
----- ----- - --------------------------------
--------------------------- ---
---------------- - -----
--
-
-------- ---------------- -
-- ------------------------ -
----- --- -------------- ---- -- ----- -------- - -
---- ------ ---------- --- ----- -----------
-
-- ------- ----------- --- ------------ -
----- --- -------------- --- --- ---- -- --------- ------ --------- - -
----- --- ---------- - ------------
-
-- --------------- -
----- --- --------------- --- --- -------- -----------
-
--- -
------------- - -----
------------ - ---------------------------- --------
- ------- -
------------- - ------
-
----- --------- - ---------------- - --------------
--- ---- - - -- - - ----------------- ---- -
----- -------- - -------------
-----------
-
------ -------
-
-------- --------------------------- -
-- ------- ----------- --- ----------- -
----- --- --------------- --- ----------- -- -- - ------------
-
-------------- - ------------
---------- ----- ------------------- ---
-
---------- ----- ---------------- ---
------ -
---------
----------
---------
--------------
--
-我们来一步一步地分析这段代码。
参数处理
在函数的开头，我们看到了一段参数处理的代码：
-- -------------------- ---- -------
-- ------- -------------- --- ---------- -- ------ -------- --- ------------ -
-------- - ---------------
-------------- - ----------
-
-- ------- -------- --- ------------ -
-- ------- -------- --- ----------- -
----- --- --------------- --- -------- -- -- - ------------
-
------ ------------------------------ ----------------
-
-- ------- ------- --- ----------- -
----- --- --------------- --- ------- -- -- - ------------
-这段代码的作用是处理 createStore 函数的三个参数：reducer、preloadedState 和 enhancer。如果 preloadedState 是一个函数而 enhancer 是 undefined，那么 enhancer 就等于 preloadedState，而 preloadedState 设置为 undefined。如果 enhancer 不是 undefined，那么我们就调用 enhancer 函数，并将 createStore 函数作为参数传递给它。最后，我们检查 reducer 是否为一个函数，如果不是，就抛出一个错误。
初始化状态
接下来，我们定义了一些变量，用于存储状态和监听器的信息：
let currentReducer = reducer; let currentState = preloadedState; let currentListeners = []; let nextListeners = currentListeners; let isDispatching = false;
- currentReducer：当前的 reducer 函数。
- currentState：当前的状态树。
- currentListeners：当前的监听器列表。
- nextListeners：下一个状态变化时需要通知的监听器列表。这个列表可能会被修改，所以我们需要一个副本来遍历监听器。
- isDispatching：是否正在执行 dispatch 函数。
状态访问
接下来，我们定义了 getState 函数，用于访问当前状态树：
-- -------------------- ---- -------
-------- ---------- -
-- --------------- -
----- --- ---------- ------ ---- ---------- ----- --- ------- -- ---------- - -
---- --- -- ---------- -- ------ --- ----- ------ -- --- ---- ------- - -
------- --- -------- ------------
-
------ -------------
-这个函数很简单，它只是返回当前状态树。但是，如果当前正在执行 dispatch 函数，那么 getState 函数就会抛出一个错误，因为此时状态树还没有被更新。
状态订阅
接下来，我们定义了 subscribe 函数，用于订阅状态变化：
-- -------------------- ---- -------
-------- ------------------- -
-- ------- -------- --- ----------- -
----- --- --------------- --- -------- -- -- - ------------
-
--- ------------ - -----
-------------------------------
-----------------------------
------ -------- ------------- -
-- --------------- -
-------
-
------------ - ------
-------------------------------
----- ----- - --------------------------------
--------------------------- ---
---------------- - -----
--
-这个函数接收一个监听器函数作为参数，然后将它添加到 nextListeners 列表中。为了保证 nextListeners 列表的正确性，我们调用了 ensureCanMutateNextListeners 函数，它用于检查 nextListeners 是否与 currentListeners 相同，如果相同就创建一个副本。然后，我们返回一个函数，用于取消订阅。这个函数会从 nextListeners 列表中删除监听器，并将 currentListeners 设置为 null。
状态更新
接下来，我们定义了 dispatch 函数，用于更新状态树：
-- -------------------- ---- -------
-------- ---------------- -
-- ------------------------ -
----- --- -------------- ---- -- ----- -------- - -
---- ------ ---------- --- ----- -----------
-
-- ------- ----------- --- ------------ -
----- --- -------------- --- --- ---- -- --------- ------ --------- - -
----- --- ---------- - ------------
-
-- --------------- -
----- --- --------------- --- --- -------- -----------
-
--- -
------------- - -----
------------ - ---------------------------- --------
- ------- -
------------- - ------
-
----- --------- - ---------------- - --------------
--- ---- - - -- - - ----------------- ---- -
----- -------- - -------------
-----------
-
------ -------
-这个函数接收一个 action 对象作为参数，并根据这个 action 对象来更新状态树。在更新状态树之前，我们先检查 action 对象是否为一个纯对象，如果不是，就抛出一个错误。然后，我们检查 action 对象是否有一个 type 属性，如果没有，就抛出一个错误。最后，我们检查当前是否正在执行 dispatch 函数，如果是，就抛出一个错误。
接下来，我们将 isDispatching 设置为 true，表示正在执行 dispatch 函数。然后，我们调用 currentReducer 函数，并传递当前的状态树和 action 对象作为参数，得到一个新的状态树。我们将这个新的状态树保存到 currentState 变量中。最后，我们将 isDispatching 设置为 false，表示 dispatch 函数执行完毕。
接下来，我们将 currentListeners 设置为 nextListeners，然后遍历 currentListeners 列表，并调用每个监听器函数。这样，所有订阅状态变化的监听器都会被通知。最后，我们返回 action 对象。
替换 reducer
最后，我们定义了 replaceReducer 函数，用于替换当前的 reducer 函数：
function replaceReducer(nextReducer) {
if (typeof nextReducer !== 'function') {
throw new Error('Expected the nextReducer to be a function.');
}
currentReducer = nextReducer;
dispatch({ type: ActionTypes.REPLACE });
}这个函数接收一个新的 reducer 函数作为参数，并将它保存到 currentReducer 变量中。然后，我们调用 dispatch 函数，并传递一个特殊的 action 对象，它的 type 属性为 ActionTypes.REPLACE。这个 action 对象的作用是让 reducer 函数返回它的初始状态，以便我们可以用新的 reducer 函数来处理状态变化。
总结
在本文中，我们深入分析了 Redux 库的核心函数 createStore 的源代码。我们了解了 createStore 函数的基本用法，并逐步分析了它的源代码。通过对 createStore 函数的分析，我们可以更好地理解 Redux 的工作原理，并且可以更好地使用 Redux 来管理应用程序的状态。如果你想深入学习 Redux，建议你阅读 Redux 官方文档，并参考 Redux 的源代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66178345d10417a2227663de