Redux 是一个流行的 JavaScript 应用程序状态管理工具，它提供了一种可预测的状态管理方案，使得应用程序的状态变得可追溯、可调试，并且易于维护。Redux 基于 Flux 架构，通过单向数据流的方式来管理应用程序的状态。在 Redux 中，所有的状态都被存储在一个称为 Store 的对象中，并且只能通过 Dispatch 函数来修改状态。本文将详细解析 Redux 的核心函数 createStore，帮助读者深入理解 Redux 的实现原理。
createStore 函数的作用
createStore 函数是 Redux 的核心函数之一，它的作用是创建一个新的 Store 对象。Store 对象是 Redux 中的核心概念，它存储了应用程序的状态，并提供了一些函数用于修改状态。createStore 函数接受三个参数：reducer、preloadedState 和 enhancer。
- reducer：reducer 是一个纯函数，它接受两个参数：state 和 action，返回一个新的状态。reducer 的作用是根据当前的状态和接收到的 action 来计算出新的状态。在 Redux 中，所有的状态都由 reducer 来计算。
- preloadedState：preloadedState 是一个可选参数，它用于初始化 Store 的状态。如果不提供 preloadedState，则使用 reducer 的默认状态。
- enhancer：enhancer 是一个可选的高阶函数，它可以对 Store 进行增强。Redux 提供了一个叫做 applyMiddleware 的 enhancer，它可以用于添加中间件。
createStore 函数的实现
下面是 createStore 函数的简化实现：
-- -------------------- ---- -------
-------- -------------------- --------------- --------- -
-- ------- -------------- --- ---------- -- ------ -------- --- ------------ -
-------- - ---------------
-------------- - ----------
-
--- ------------ - ---------------
--- -------------- - --------
--- --------- - ---
-------- ---------- -
------ -------------
-
-------- ---------------- -
------------ - ---------------------------- --------
-------------------------- -- ------------
------ -------
-
-------- ------------------- -
-------------------------
------ -------- ------------- -
--------- - ------------------ -- - --- ----------
--
-
---------- ----- -------------- ---
------ -
---------
---------
---------
--
-createStore 函数首先会检查 preloadedState 和 enhancer 的类型，如果 preloadedState 是一个函数且 enhancer 未定义，则将 enhancer 赋值为 preloadedState，并将 preloadedState 赋值为 undefined。这是因为 createStore 函数可以接受两个参数或三个参数，如果只传递两个参数，第二个参数就是 preloadedState，如果传递了三个参数，第二个参数就是 preloadedState，第三个参数就是 enhancer。
接下来，createStore 函数会定义三个变量：currentState、currentReducer 和 listeners。currentState 存储了 Store 的当前状态，currentReducer 存储了当前的 reducer 函数，listeners 存储了所有的监听函数。
createStore 函数还定义了三个函数：getState、dispatch 和 subscribe。getState 函数用于获取 Store 的当前状态，dispatch 函数用于派发 action，subscribe 函数用于添加监听函数。dispatch 函数会调用 currentReducer 函数来计算新的状态，并且会调用所有的监听函数来通知状态变化。
最后，createStore 函数会派发一个初始 action，这个 action 的类型为 '@@redux/INIT'，这个 action 的作用是让 reducer 返回默认状态。
createStore 函数的示例
下面是一个使用 createStore 函数创建 Store 的示例：
-- -------------------- ---- -------
-------- -------------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
-
----- ----- - ----------------------------
------------------ -- -
------------------------------
---
---------------- ----- ----------- --- -- ----
---------------- ----- ----------- --- -- ----
---------------- ----- ----------- --- -- ----上面的示例中，我们定义了一个 counterReducer 函数，它接受一个状态和一个 action，根据 action 的类型来计算新的状态。然后我们使用 createStore 函数创建了一个新的 Store，传递了 counterReducer 函数作为 reducer。接着我们添加了一个监听函数，它会在 Store 的状态变化时输出当前的状态。最后我们派发了三个 action，分别是 INCREMENT、INCREMENT 和 DECREMENT，它们会分别将状态加一、加一和减一。
总结
本文详细解析了 Redux 的核心函数 createStore，帮助读者深入理解 Redux 的实现原理。createStore 函数是 Redux 中最基本的函数之一，它用于创建一个新的 Store 对象。createStore 函数接受三个参数：reducer、preloadedState 和 enhancer，其中 reducer 是一个纯函数，用于计算新的状态；preloadedState 是一个可选参数，用于初始化 Store 的状态；enhancer 是一个可选的高阶函数，用于对 Store 进行增强。createStore 函数的实现非常简单，它只是定义了三个变量和三个函数，并且派发了一个初始 action。最后，我们通过一个示例代码演示了如何使用 createStore 函数创建一个新的 Store 对象。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650fe50495b1f8cacd892e4c