My Redux:手把手构建一个自己的状态管理器

如果你正在进行前端开发,那么你一定知道状态管理器的重要性,尤其是在构建大型单页应用(SPA)时。Redux是一个广泛使用的状态管理库,但是在某些特定情况下,可能会需要一个更加个性化的状态管理器。在本文中,我们将手把手地构建一个自己的状态管理器,名为“myRedux”。

Redux简介

首先,让我们来了解一下Redux的一些基本概念。Redux提供了一个单一的存储(store),用于存储应用中所有的状态(state)。当状态发生变化时,Redux通过一个action来描述这个变化,并触发一个reducer来处理这个action,然后更新存储中的状态。Store会通知有关的所有组件进行更新。

Redux通常需要使用一些中间件和辅助函数来简化代码和提高性能。例如,thunk中间件用于处理异步操作,而连接(connect)函数用于将Store中的状态连接到组件中。

实现myRedux

接下来,我们将实现一个模拟Redux的myRedux。我们将使用ES6语法,并假设你已经有一些JavaScript和React的基础知识。

创建 Store

首先,我们需要一个createStore函数来创建存储。myRedux的存储将具有类似Redux的结构。我们将创建一个名为“createStore”的函数,并使其在调用时返回一个对象,包含以下三个方法:

  • getState():获取当前状态
  • dispatch(action):触发一个action并调用reducer
  • subscribe(listener):在状态更改时调用监听器

这是我们的初始代码:

-------- -------------------- -
  --- ------
  --- --------- - ---

  -------- ---------- -
    ------ ------
  -

  -------- ---------------- -
    -- ----- ---- -------
    -- ----- ---- ---------
  -

  -------- ------------------- -
    -------------------------
    -- ------ - -------- -- -----------
    ------ -- -- -
      --------- - ------------------ -- - --- ----------
    --
  -

  ------ - --------- --------- --------- --
-

如上所述,我们的存储将具有一个状态(state)和一个监听器数组(listeners)。我们还添加了两个未完善的函数:dispatch和subscribe。

处理 Action

接下来,我们需要编写一个reducer来处理action并更新状态。我们的reducer将在dispatch函数中使用。我们将让reducer返回一个新状态(以避免出现副作用),因此需要确保我们的状态是不可变的。这里我们可以使用ES6的扩展运算符将旧状态与新状态合并。

-------- -------------- ------- -
  ------ ------------- -
    ---- ------
      ------ - --------- ------ ----------- - - --
    ---- -----------
      ------ - --------- ------ ----------- - - --
    --------
      ------ ------
  -
-

这个reducer很简单,只是检查了我们可能传递给它的两种类型的action:ADD和SUBTRACT,并更新count属性。我们还添加了一个default条件,以确保我们的reducer可以处理所有其他类型的action,并返回旧状态。

现在我们可以在dispatch函数中使用reducer,以根据传入的action更新状态。另外,我们还需要在dispatch函数中通知所有监听器状态已更改。

-------- ---------------- -
  ----- - -------------- --------
  -------------------------- -- ------------
-

在这里,我们使用了JavaScript中的变量提升,以便在之前声明并赋值给state时就能够访问它。

现在我们的存储已经可以存储状态并通过一个纯函数(reducer)来处理action。让我们创建一个初始状态对象并使用它创建一个新的存储。

----- ------------ - - ------ - --
----- ----- - -------------------- --------------

我们现在可以使用store对象的getState和dispatch函数来获取和更新状态。

监听状态更改

让我们继续实现我们的最后一个方法:subscribe。这个方法将接收一个监听器(listener),并在状态更改时调用。同时,我们还需要提供一个方法来取消订阅。

-------- ------------------- -
  -------------------------
  ------ -- -- -
    --------- - ------------------ -- - --- ----------
  --
-

在这里,我们简单地将监听器添加到数组中。当调用store.dispatch时,我们将循环遍历所有已添加的监听器并调用它们。我们还在返回函数中添加了一个过滤器,以便在取消订阅时删除已添加的监听器。

完整代码

最后,这是我们的完整代码:

-------- -------------------- ------------- -
  --- ----- - -------------
  --- --------- - ---

  -------- ---------- -
    ------ ------
  -

  -------- ---------------- -
    ----- - -------------- --------
    -------------------------- -- ------------
  -

  -------- ------------------- -
    -------------------------
    ------ -- -- -
      --------- - ------------------ -- - --- ----------
    --
  -

  ------ - --------- --------- --------- --
-

-------- -------------- ------- -
  ------ ------------- -
    ---- ------
      ------ - --------- ------ ----------- - - --
    ---- -----------
      ------ - --------- ------ ----------- - - --
    --------
      ------ ------
  -
-

----- ------------ - - ------ - --
----- ----- - -------------------- --------------

----- ----------- - ------------------ --
  ------------------ -------- -- -----------------
--

---------------- ----- ----- ---
---------------- ----- ----- ---
---------------- ----- ---------- ---

--------------

我们刚刚构建了一个非常简单的状态管理器,但它为我们提供了一个很好的基础来从中构建更复杂的实现。有关更高级技术,例如thunk中间件和连接函数,请参阅Redux文档。

结论

状态管理器是构建大型单页应用的关键部分。在本文中,我们手把手地创建了一个简单的状态管理器,myRedux。虽然这只是一个基础版本,但你可以在其中添加更多功能,以方便你自己的开发过程。如果你对Redux产生了兴趣,可以查阅Redux文档以了解更多高级技术,构建更高效、更具扩展性的状态管理器。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671e16052e7021665ef5b16e