如果你正在进行前端开发,那么你一定知道状态管理器的重要性,尤其是在构建大型单页应用(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函数中通知所有监听器状态已更改。
-------- ---------------- - ----- - -------------- -------- -------------------------- -- ------------ -
在这里,我们使用了JavaScript中的变量提升,以便在之前声明并赋值给state时就能够访问它。
现在我们的存储已经可以存储状态并通过一个纯函数(reducer)来处理action。让我们创建一个初始状态对象并使用它创建一个新的存储。
----- ------------ - - ------ - -- ----- ----- - -------------------- --------------
我们现在可以使用store对象的getState和dispatch函数来获取和更新状态。
监听状态更改
让我们继续实现我们的最后一个方法:subscribe。这个方法将接收一个监听器(listener),并在状态更改时调用。同时,我们还需要提供一个方法来取消订阅。
-------- ------------------- - ------------------------- ------ -- -- - --------- - ------------------ -- - --- ---------- -- -
在这里,我们简单地将监听器添加到数组中。当调用store.dispatch时,我们将循环遍历所有已添加的监听器并调用它们。我们还在返回函数中添加了一个过滤器,以便在取消订阅时删除已添加的监听器。
完整代码
最后,这是我们的完整代码:
-------- -------------------- ------------- - --- ----- - ------------- --- --------- - --- -------- ---------- - ------ ------ - -------- ---------------- - ----- - -------------- -------- -------------------------- -- ------------ - -------- ------------------- - ------------------------- ------ -- -- - --------- - ------------------ -- - --- ---------- -- - ------ - --------- --------- --------- -- - -------- -------------- ------- - ------ ------------- - ---- ------ ------ - --------- ------ ----------- - - -- ---- ----------- ------ - --------- ------ ----------- - - -- -------- ------ ------ - - ----- ------------ - - ------ - -- ----- ----- - -------------------- -------------- ----- ----------- - ------------------ -- ------------------ -------- -- ----------------- -- ---------------- ----- ----- --- ---------------- ----- ----- --- ---------------- ----- ---------- --- --------------
我们刚刚构建了一个非常简单的状态管理器,但它为我们提供了一个很好的基础来从中构建更复杂的实现。有关更高级技术,例如thunk中间件和连接函数,请参阅Redux文档。
结论
状态管理器是构建大型单页应用的关键部分。在本文中,我们手把手地创建了一个简单的状态管理器,myRedux。虽然这只是一个基础版本,但你可以在其中添加更多功能,以方便你自己的开发过程。如果你对Redux产生了兴趣,可以查阅Redux文档以了解更多高级技术,构建更高效、更具扩展性的状态管理器。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671e16052e7021665ef5b16e