随着前端应用的复杂度不断提高，状态管理已经成为前端开发中的一个重要问题。在 Angular 中，我们可以使用 ngrx 来实现状态管理。本文将介绍 ngrx 的基本概念和使用方法，并给出一个示例应用。
ngrx 的基本概念
Store
Store 是状态管理的核心，它包含了应用中所有的状态，并提供了一些方法来修改状态。在 Angular 中，我们可以使用 @ngrx/store 包来创建 Store。
Action
Action 是一个简单的对象，它描述了一个状态的变化。Action 通常包含一个 type 属性和一些其它属性。在 Angular 中，我们可以使用 @ngrx/store 包中的 createAction 函数来创建 Action。
Reducer
Reducer 是一个纯函数，它接收一个状态和一个 Action，然后返回一个新的状态。Reducer 的作用是将多个 Action 合并成一个新的状态。在 Angular 中，我们可以使用 @ngrx/store 包中的 createReducer 函数来创建 Reducer。
Selector
Selector 是一个函数，它从 Store 中选择一部分状态，并返回一个新的对象。Selector 的作用是将 Store 中的状态转换成适合视图渲染的数据。在 Angular 中，我们可以使用 @ngrx/store 包中的 createSelector 函数来创建 Selector。
ngrx 的使用方法
安装依赖
首先，我们需要安装 @ngrx/store 和 @ngrx/effects 包：
npm install @ngrx/store @ngrx/effects --save
创建 Store
我们可以使用 @ngrx/store 包中的 createStore 函数来创建 Store。下面是一个简单的示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
--------- -------- -
------ -------
-
----- ------------- -------- - -
------ -
--
-------- -------------- -------- - ------------- ------- ----- -------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
------ ----- ----- - ---------------------在这个示例中，我们创建了一个名为 store 的 Store，它包含一个名为 count 的状态。我们还定义了一个 Reducer，它根据不同的 Action 来修改状态。
创建 Action
我们可以使用 @ngrx/store 包中的 createAction 函数来创建 Action。下面是一个示例：
import { createAction } from '@ngrx/store';
export const increment = createAction('increment');
export const decrement = createAction('decrement');在这个示例中，我们创建了两个 Action：increment 和 decrement。它们分别表示增加和减少计数器的值。
创建 Reducer
我们可以使用 @ngrx/store 包中的 createReducer 函数来创建 Reducer。下面是一个示例：
-- -------------------- ---- ------- ------ - -------------- -- - ---- -------------- ------ - ---------- --------- - ---- -------------------- --------- ------------ - ------ ------- - ------ ----- ------------- ------------ - - ------ - -- ------ ----- -------------- - -------------- ------------- ------------- ----- -- -- --------- ------ ----------- - - ---- ------------- ----- -- -- --------- ------ ----------- - - --- --
在这个示例中，我们创建了一个名为 counterReducer 的 Reducer，它根据 increment 和 decrement 两个 Action 来修改状态。我们还定义了一个名为 initialState 的初始状态。
创建 Selector
我们可以使用 @ngrx/store 包中的 createSelector 函数来创建 Selector。下面是一个示例：
import { createSelector } from '@ngrx/store';
export const selectCounter = (state: any) => state.counter;
export const selectCount = createSelector(
selectCounter,
(state: any) => state.count
);在这个示例中，我们创建了一个名为 selectCount 的 Selector，它从 Store 中选择 counter 对象，并返回其中的 count 属性。
在组件中使用 Store
在组件中使用 Store 有两种方式：使用 store.select 方法来选择状态，或使用 store.dispatch 方法来触发 Action。下面是一个示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----- - ---- --------------
------ - ---------- --------- - ---- --------------------
------ - ----------- - ---- ----------------------
------------
--------- -----------
--------- -
------- --------------------------------
-------- ------ - ----- ---------
------- --------------------------------
-
--
------ ----- ------------ -
------ - -------------------------------
------------------- ------ ----------- --
----------- -
---------------------------------
-
----------- -
---------------------------------
-
-在这个示例中，我们在组件中使用了 selectCount Selector 和 increment 和 decrement 两个 Action。我们还使用了 async 管道符来订阅 Store 中的状态。
示例应用
下面是一个使用 ngrx 实现状态管理的示例应用：https://github.com/RebeccaHanjw/angular-ngrx-counter。这个应用包含了一个计数器组件和一个使用了 ngrx 的计数器服务。你可以参考这个应用来学习如何使用 ngrx。
总结
在本文中，我们介绍了 ngrx 的基本概念和使用方法。ngrx 是一个强大的状态管理工具，可以帮助我们更好地管理前端应用中的状态。如果你正在开发复杂的前端应用，那么学习 ngrx 是非常有必要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660fc870d10417a22207397a