在现代的前端开发中，单页应用（SPA）已成为一种常见的开发方式，因为它可以提高用户体验并提供更流畅的用户交互。然而，SPA 的开发也带来了一些挑战，其中一个挑战就是管理应用程序中的状态。 在这种情况下，一个流行的解决方案是使用状态管理工具，例如 NgRx。
NgRx 是一个基于 Redux 架构的 Angular 状态管理库，它有助于管理应用程序的状态并提供可预测的应用程序状态。 在本文中，我们将探讨如何在 Angular SPA 中使用 NgRx 进行全局状态管理。
安装 NgRx
首先，我们需要安装 @ngrx/store 以及相关的 RxJS 连接操作符以连接与操作 store。可以使用 Angular CLI 的命令 npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools来直接安装这些依赖项。
创建 Store
我们需要创建一个新的 store，在这个 store 中存储所有应用程序的状态。Store 可以通过创建一个根 reducer 和传递给 StoreModule 来创建。
在根目录下，创建一个新文件夹叫做“store”，然后再创建一个名为“index.ts”的新文件。下面是 index.ts 文件的代码示例：
import { ActionReducerMap } from '@ngrx/store';
export interface AppState {}
export const reducers: ActionReducerMap<AppState> = {};在上面的代码中，我们将创建一个空的应用程序状态 AppState，并定义一个空的 reducer。
接下来，我们需要将这个 root reducer 注册到应用程序中，以便使用 NgRx 提供的 Store 管理应用程序状态。在 app.module.ts 文件中导入 StoreModule，然后在 imports 数组中注册 StoreModule 和 reducers，示例代码如下：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------- - ---- --------------
------ - -------- - ---- ----------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
------------------------------------- ----------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在上面的代码中，我们使用 StoreModule.forRoot 接受 reducers 对象并将其传递到 Store。forFeature 方法与主存储库不同，它接受一个特定方面的名称和一组 reducers。专业方面不是必需的，但它确保了我们在合并不同的 store 片段时不会混入状态。
创建 Actions
现在，我们需要定义一些 actions 允许我们改变状态。 action 是一个用来描述我们将要执行的操作（例如添加一个条目或删除一个条目）的对象。 NgRx 提供了一个 createReducer 函数，帮助我们定义操作的 reducer 函数。下面是创建 action 的示例代码：
import { createAction, props } from '@ngrx/store';
export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');
export const reset = createAction('[Counter Component] Reset');在上面的代码中，我们定义了三个 actions：increment、decrement 和 reset。[actionName] 表示 action 的类型。 createAction() 函数返回一个 ActionCreator，它将创建一个 action（一个带有 type 字段的对象）。我们还可以在 createAction() 函数中传递相关的参数，如“payload”，以更改状态。
创建 Reducers
Reducer 是一段纯函数，它根据当前状态和 action 返回一个新的状态。reducers 由 NgRx store 负责执行组合。在这里，我们重写 reducers 对象，将其反映在我们的 state，来管理increment、decrement 和reset actions。下面是示例代码：
-- -------------------- ---- ------- ------ - ------- -------------- -- - ---- -------------- ------ - ---------- ---------- ----- - ---- -------------------- ------ --------- ------------ - ------ ------- - ------ ----- ------------- ------------ - - ------ - -- ----- -------------- - -------------- ------------- ------------- ----- -- -- ------ ----------- - - ---- ------------- ----- -- -- ------ ----------- - - ---- --------- ----- -- -- ------ - --- -- ------ -------- -------------- ------------ - ---------- ------- ------- - ------ --------------------- -------- -
在上面的代码中，我们首先定义 CounterState，然后定义 initialState。最后，我们创建了一个谔谔函数组（counterReducer），并将它传递给我们的 rootReducer。 我们可以看到，我们在 reducer 的 body 中使用了 Reducer utility 函数中的 on() API。此API 用于定义 reducer 的行为，然后将它们与我们定义的 increment、decrement 和 reset actions 关联。
创建 Selectors
为了获得应用程序状态的所有可能部分，您需要创建一个选择器，选择器就是用来将 store 中的数据提取到应用程序中的函数，从而使我们能够在视图中对其进行访问和使用不同的组件数据。下面是一个创建 Counter 选择器的示例代码：
-- -------------------- ---- ------- ------ - -------------- - ---- -------------- ------ - -------- - ---- ----------- ------ - ------------ - ---- -------------------- ------ ----- ------------- - ------- --------- -- -------------- ------ ----- ----------- - --------------- -------------- ------- ------------- -- ----------- --
在上面的代码中，我们首先定义一个选择器 selectCounter，它将返回 CounterState 对象的 state，然后再创建 selectCount 选择器，它将 CounterState 对象中的 count 字段返回为一个整数。
派遣 Actions
现在，我们已经定义了所有操作、reducers 和 selectors，我们可以通过派发 action 来改变 state：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- ---------- ----- - ---- --------------------------
------ - ----------- - ---- ----------------------------
------ - ---------- - ---- -------
------------
--------- --------------
------------ ---------------------------
---------- ---------------------------
--
------ ----- ---------------- -
------- -------------------
------------------- ------ ---------------- -
----------- - --------------------------
-
----------- -
---------------------------------
-
----------- -
---------------------------------
-
------- -
-----------------------------
-
-在上面的代码中，我们首先导入 Store，并利用「函数式编程」的方式创建一个名为 count$ 的可观察对象，它将选择 selectCount 选择器并用于返回当前计数器的值。 然后，我们定义三个 action 操作: increment、decrement 和 reset。 当我们调用 increment、decrement 或 reset 操作时，它们持续派发一个 action 到 store 中，然后 store.reducer() 方法返回一个新的 state，这个 state 接着反馈到组件中。
总结
在本文中，我们探讨了如何在 Angular SPA 中使用 NgRx 进行全局状态管理。我们讨论了在根目录和特定 feature 下创建和注册 store、创建 actions、reducers 和 selectors、以及派遣 actions 方法。
虽然 NgRx 为 Angular 应用程序提供了可预测的状态管理解决方案，但它可能会导致一些代码重复。建议在新项目中考虑使用 React 进行状态管理，因为它可以使用更优秀的库，如 Redux 或 MobX，更方便地提供更好的解决方案。
示例代码
完整的示例代码可以在这里找到：https://github.com/ngrx/platform/tree/master/example-app
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a9dca548841e98945f53f7