Redux 源码解析（一）-- createStore 篇-JavaScript中文网-JavaScript教程资源分享门户

Redux 源码解析（一）-- createStore 篇

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