Redux 是一个非常流行的 JavaScript 应用状态管理库。它的核心思想在于将应用的状态保存在一个单一的 store 对象中，使得整个应用的状态变得鲜明可见，同时方便了状态的管理和控制。本篇文章将介绍 Redux 的核心方法之一：createStore，协助读者深入理解其源码实现，并且通过示例代码来展示如何使用这个方法。
createStore 方法是什么？
createStore 是 Redux 中的一个方法，它用来创建一个 Redux store 对象，这个对象包含了整个应用的 state 和相关的一些方法。我们先来看一下这个方法的基本用法：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------上述代码中，我们传递了一个 reducer 函数给 createStore 方法，这个函数将用来修改我们的 state 对象。当 store 对象被创建后，我们就可以使用它的一些方法来读取、更新、删除应用中的 state 了。
createStore 方法的源码实现
现在，我们来探究一下 createStore 方法的源码实现是如何完成的。
首先，我们需要创建一个通用的 reducer 函数，它接收两个参数：state 和 action，返回一个经过处理后的 state。
-- -------------------- ---- -------
------ ------- -------- -------------------- --------------- --------- -
-- ------ ------------- -------- ---
-- ------- -------- --- ------------ -
------ ------------------------------ ----------------
-
-- ------------
--- ------------ - ---------------
--- ---------------- - ---
-- --------
-------- ---------- -
------ -------------
-
-- -------
-------- ------------------- -
--------------------------------
-
-- ---- ------
-------- ---------------- -
-- --- ------- ------
------------ - --------------------- --------
-- ----------
--- ---- - - -- - - ------------------------ ---- -
----- -------- - --------------------
-----------
-
-
-- ---- ---------------
---------- ----- ------------- ---
-- ---- --------------------------- ---
------ -
---------
----------
--------
--
-在上面的代码中，我们首先判断 enhancer 是否存在。如果存在，那么我们将返回 enhancer 函数的执行结果。enhancer 函数本身是一个高阶函数，用于生成一个“加强版”的 createStore 函数。
如果 enhancer 不存在，我们将继续执行 createStore 函数的主体部分。在这里，我们创建了三个常量 currentState、currentListeners 和 listenCleared，分别用来存储当前状态、监听器数组和当前的 dispatch 是否清空的标识。
接下来，我们创建了三个函数：getState、subscribe 和 dispatch，分别用来获取当前状态、添加监听器和派发 action。其中，dispatch 函数是最关键的函数。我们将 action 和当前的 state 传递给 reducer 函数，得到一个新的 state。然后，我们再依次执行所有的监听器。
最后，我们在返回的对象中提供了 getState、subscribe 和 dispatch 三个方法，用户可以通过这些方法来获取状态、注册监听器和派发 action。
createStore 方法的使用示例
现在，我们来看一下如何使用 createStore 方法。我们依然以计数器为例子：
首先，我们创建一个 reducer 函数：
-- -------------------- ---- -------
-------- ------------- - - ------ - -- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-然后，我们通过 createStore 方法创建一个 store 对象：
import { createStore } from 'redux';
const store = createStore(reducer);现在，我们已经创建了一个默认的 store 对象了，它的 state 是 { count: 0 }。我们可以通过 store 的 getState 方法来获取当前的 state：
console.log(store.getState()); // 输出 { count: 0 }我们可以通过 store 的 dispatch 方法来派发 action，修改 state：
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // 输出 { count: 1 }
store.dispatch({ type: 'DECREMENT' });
console.log(store.getState()); // 输出 { count: 0 }我们也可以通过 store 的 subscribe 方法来添加监听器，监听 state 的变化：
store.subscribe(() => {
console.log(store.getState());
});
store.dispatch({ type: 'INCREMENT' }); // 输出 { count: 1 }
store.dispatch({ type: 'DECREMENT' }); // 输出 { count: 0 }在一个复杂的应用程序中，我们可以通过 createStore 和 reducer 函数来管理我们的状态，实现状态的可追踪和可控制，确保应用程序状态的正确性和可维护性。
总结
在本文中，我们通过解析 Redux 的 createStroe 方法，实现了一个通用的 store 库，通过 getState、subscribe 和 dispatch 方法来维护应用程序的状态。同时，通过示例代码的讲解，我们可以更好的理解这些概念。当我们掌握了 Redux 的核心思想后，我们可以使用这个库来更好的管理我们的应用程序状态，构建更加可维护和可扩展的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa57b648841e9894686846