如果你正在进行前端开发，那么你一定知道状态管理器的重要性，尤其是在构建大型单页应用（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并调用reducersubscribe(listener)：在状态更改时调用监听器
这是我们的初始代码：
-- -------------------- ---- -------
-------- -------------------- -
--- ------
--- --------- - ---
-------- ---------- -
------ ------
-
-------- ---------------- -
-- ----- ---- -------
-- ----- ---- ---------
-
-------- ------------------- -
-------------------------
-- ------ - -------- -- -----------
------ -- -- -
--------- - ------------------ -- - --- ----------
--
-
------ - --------- --------- --------- --
-如上所述，我们的存储将具有一个状态（state）和一个监听器数组（listeners）。我们还添加了两个未完善的函数：dispatch和subscribe。
处理 Action
接下来，我们需要编写一个reducer来处理action并更新状态。我们的reducer将在dispatch函数中使用。我们将让reducer返回一个新状态（以避免出现副作用），因此需要确保我们的状态是不可变的。这里我们可以使用ES6的扩展运算符将旧状态与新状态合并。
-- -------------------- ---- -------
-------- -------------- ------- -
------ ------------- -
---- ------
------ - --------- ------ ----------- - - --
---- -----------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-这个reducer很简单，只是检查了我们可能传递给它的两种类型的action：ADD和SUBTRACT，并更新count属性。我们还添加了一个default条件，以确保我们的reducer可以处理所有其他类型的action，并返回旧状态。
现在我们可以在dispatch函数中使用reducer，以根据传入的action更新状态。另外，我们还需要在dispatch函数中通知所有监听器状态已更改。
function dispatch(action) {
state = reducer(state, action);
listeners.forEach(listener => listener());
}在这里，我们使用了JavaScript中的变量提升，以便在之前声明并赋值给state时就能够访问它。
现在我们的存储已经可以存储状态并通过一个纯函数（reducer）来处理action。让我们创建一个初始状态对象并使用它创建一个新的存储。
const initialState = { count: 0 };
const store = createStore(reducer, initialState);我们现在可以使用store对象的getState和dispatch函数来获取和更新状态。
监听状态更改
让我们继续实现我们的最后一个方法：subscribe。这个方法将接收一个监听器（listener），并在状态更改时调用。同时，我们还需要提供一个方法来取消订阅。
function subscribe(listener) {
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
};
}在这里，我们简单地将监听器添加到数组中。当调用store.dispatch时，我们将循环遍历所有已添加的监听器并调用它们。我们还在返回函数中添加了一个过滤器，以便在取消订阅时删除已添加的监听器。
完整代码
最后，这是我们的完整代码：
-- -------------------- ---- -------
-------- -------------------- ------------- -
--- ----- - -------------
--- --------- - ---
-------- ---------- -
------ ------
-
-------- ---------------- -
----- - -------------- --------
-------------------------- -- ------------
-
-------- ------------------- -
-------------------------
------ -- -- -
--------- - ------------------ -- - --- ----------
--
-
------ - --------- --------- --------- --
-
-------- -------------- ------- -
------ ------------- -
---- ------
------ - --------- ------ ----------- - - --
---- -----------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
----- ------------ - - ------ - --
----- ----- - -------------------- --------------
----- ----------- - ------------------ --
------------------ -------- -- -----------------
--
---------------- ----- ----- ---
---------------- ----- ----- ---
---------------- ----- ---------- ---
--------------我们刚刚构建了一个非常简单的状态管理器，但它为我们提供了一个很好的基础来从中构建更复杂的实现。有关更高级技术，例如thunk中间件和连接函数，请参阅Redux文档。
结论
状态管理器是构建大型单页应用的关键部分。在本文中，我们手把手地创建了一个简单的状态管理器，myRedux。虽然这只是一个基础版本，但你可以在其中添加更多功能，以方便你自己的开发过程。如果你对Redux产生了兴趣，可以查阅Redux文档以了解更多高级技术，构建更高效、更具扩展性的状态管理器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671e16052e7021665ef5b16e