随着 Web 应用的发展，前端开发变得越来越复杂，状态管理也变得越来越重要。React 开发者可以使用 Hooks 来管理组件的状态，但如果你是一个 Angular 开发者，你可能会问：“Angular 中如何实现 React Hooks 风格的状态管理呢？
在本文中，我们将介绍一些在 Angular 中实现 React Hooks 风格的状态管理的技术。
使用 RxJS
RxJS 是一个强大的响应式编程库，它允许开发者处理异步事件、处理数据流和管理状态。在 Angular 应用中，用 RxJS 实现一个可重用的状态管理器类是一种常见的做法。
假设我们想要在 Angular 应用中使用 React Hooks 的 useSelector 和 useDispatch Hooks。下面是一个适用于 Angular 的 RxJS 方案：
首先，我们需要创建一个状态管理器服务，例如 store.service.ts：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - --------------- - ---- -------
-------------
----------- ------
--
------ ----- ------------ -
------- ----- - --- ----------------- ------ - ---
---------------- ------- -- ---- -
------ ----------------------------------------------
-
---------------- -
----- --------- - -----------------
----- --------- - ------------------
---------------------------
-
-在上面的代码中，我们创建了一个 StoreService 服务，它将维护一个带有 count 属性的状态对象。select 方法接收一个 Selector 函数，并使用 map 操作符将 selector 应用于状态对象。dispatch 方法接收一个 action 函数，它会使用先前的状态和 action 函数来生成新的状态，并使用 next 方法更新 BehaviorSubject 实例。
现在我们可以在组件中使用我们的 StoreService：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------ - ---- ------------------
------------
--------- --------------
--------- -
------- --------------------------------
----- ------ - ----- ------
-
--
------ ----- ---------------- ---------- ------ -
------ - ----------------------- -- -------------
------------------- ------ ------------- --
---------- --
----------- -
----------------------------- -- --
-------------
------ --------------- - -
----
-
-上面的 CounterComponent 组件使用了 RxJS 的 async 管道，以从 StoreService 中异步取得 count 值，并使用 increment 方法来生成一个新的状态。
使用 Redux
对于那些想要使用 Redux 的 Angular 开发者，ngrx 是一个流行的选择。ngrx 是基于 Redux 架构的 Angular 状态管理库，它允许开发者使用类似于 React Hooks 的 useSelector 和 useDispatch。
在 ngrx 中，应用的 state 被维护在一个单一的全局 state 对象中。我们可以使用 createSelector 函数来定义我们的 selector，createAction 和 createReducer 函数来定义我们的 action 和 reducer。下面是一个 Counter 应用程序的示例：
首先，我们需要在应用中安装 ngrx 及其相关库：
npm install @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/entity
接下来，我们需要创建一个模块，例如 counter.module.ts，它将负责引入和配置 ngrx：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- --------------
------ - ------------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - -------------- - ---- --------------------
------ - -------------- - ---- --------------------
------ - ---------------- - ---- ----------------------
-----------
------------- -------------------
-------- -------------------
-------- -
-------------
------------
--------------------------------- ----------------
------------------------------------------
-
--
------ ----- ------------- --在上面的代码中，我们使用 StoreModule 和 EffectsModule 导入我们的 reducer 和 effects。
接下来，我们需要创建一个 reducer ，例如 counter.reducer.ts：
-- -------------------- ---- ------- ------ - ------------- -------------- --------------- -- - ---- -------------- ------ --------- ------------ - ------ ------- - ------ ----- ------------- ------------ - - ------ - -- ------ ----- --------- - ----------------------- ------------ ------ ----- --------- - ----------------------- ------------ ----- --------------- - -------------- ------------- ------------- ----- -- -- --------- ------ ----------- - - ---- ------------- ----- -- -- --------- ------ ----------- - - --- -- ------ -------- --------------------- ------- - ------ ---------------------- -------- - ------ ----- ----------- - ------- - -------- ------------ -- -- --------------------
在上面的代码中，我们定义了我们的 CounterState 接口和 reducer 函数。我们还定义了两个 action，它们被用于生成新的状态。我们使用 ngrx 的 createReducer 和 on 函数来创建 reducer 函数，它将取决于 action 类型来生成新的状态对象。最后，我们定义了一个 selector 函数，它将仅仅返回 count 属性。
现在我们可以在组件中使用我们的 ngrx 状态：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------- ----- - ---- --------------
------ - ------------- ---------- --------- - ---- --------------------
------------
--------- --------------
--------- -
------- -------------------------------
----- ------ - ----- ------
------- -------------------------------
-
--
------ ----- ---------------- ---------- ------ -
------ - -----------------------------------
------------------- ------ -------------------- --
---------- --
---------- -
---------------------------------
-
---------- -
---------------------------------
-
-在上面的代码中，我们使用 select 函数从 ngrx 中选择状态，并且在我们的组件模板中使用 async 管道。在 increase 和 decrease 方法中，我们分别调用 dispatch 方法来在 store 上分派 increment 和 decrement action。
结论
无论是使用 RxJS 还是 Redux，Angular 开发者都可以很容易地实现 React Hooks 风格的状态管理。如果你还没有开始使用状态管理，尝试使用这些技术来管理你的 Angular 应用程序的各个状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676fe896e9a7045d0d780570