前言
在构建大型前端应用中，状态管理是非常关键的一项工作。ngmrx 是一个基于 Redux 的 Angular 状态管理库，提供了简洁的 API 和强大的功能，可以帮助我们更好地管理应用中的状态数据。本文将详细介绍 ngmrx 的使用方法和实战指导。
安装
首先，我们需要安装 ngmrx。在终端中执行以下命令即可安装 ngmrx：
npm install --save @ngmrx/core
ngmrx 核心概念
在使用 ngmrx 之前，我们需要了解一些核心概念：
Store
Store 是应用中唯一的状态数据源。它通过提供 dispatch 方法来触发 state 的更新。我们可以通过 selector 来读取 state 的值。
Action
Action 是一个包含 type 属性的简单对象，用于描述 state 的变化。我们可以在组件中 dispatch 一个 action，并通过 reducer 处理该 action。
Reducer
Reducer 是一个纯函数，它接收一个旧的 state 并返回一个新的 state。在 reducer 中处理 action 并返回一个新的 state，是更新 state 的主要途径。
Selector
Selector 是一个函数，它用于从 state 中读取数据。selectors 的主要作用是缓存 state 的值，避免在 render 时无意义的重新计算。
ngmrx 实战应用
我们来看一个简单的实战例子。
创建一个 Store
首先，我们需要创建一个 Store。使用 NgStore 类来创建一个 Store：
-- -------------------- ---- ------- ------ - ------- - ---- -------------- --------- -------- - ------ ------- - ----- ------------- -------- - - ------ - -- ----- ----- - --- ----------------------
在这里，我们创建了一个名为 store 的 Store，它的 state 包含一个名为 count 的属性，并且初始值为 0。
Dispatch 一个 Action
我们需要创建一个 Action，用于更新 store 中的 count。使用 NgAction 类来创建一个 Action：
import { NgAction } from '@ngmrx/core';
export const incrementCount = new NgAction('INCREMENT_COUNT');这里，我们创建了一个名为 incrementCount 的 Action，它的 type 属性为 'INCREMENT_COUNT'。
我们可以在组件中 dispatch 该 Action：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ------------
------ - ----- - ---- ----------
------------
--------- --------------
--------- -
-----
----------- ------ --------------
------- ----------------------------------------
------
-
--
------ ----- ---------------- -
----- - --
----------- -
-------------------------------
-
-在这里，我们创建了一个名为 CounterComponent 的组件，其中 count 的值从 store 中读取，用户点击按钮时会 dispatch 一个名为 incrementCount 的 Action。
处理 Action
我们需要创建一个 reducer 来处理 Action。使用 NgReducer 类来创建一个 reducer：
-- -------------------- ---- -------
------ - --------- - ---- --------------
------ - -------- - ---- --------------
------ - -------------- - ---- ------------
------ ----- ------------ - --- --------------------------- ------- -- -
------ ------------- -
---- --------------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
---在这里，我们创建了一个名为 countReducer 的 reducer，它接收一个旧的 state 和一个 action 并返回一个新的 state。
在这个例子中，我们只处理了一个名为 incrementCount 的 Action。当这个 Action 被 dispatch 时，会让 count 的值加 1。
我们需要将该 reducer 添加到 store 中：
-- -------------------- ---- ------- ------ - ------- - ---- -------------- ------ - ------------ - ---- ------------- --------- -------- - ------ ------- - ----- ------------- -------- - - ------ - -- ----- ----- - --- --------------------- ----------------
这样，当我们 dispatch incrementCount Action 时，就会触发 countReducer 并更新 store 中的 count 值。
读取 Store 中的数据
我们可以使用 selector 从 store 中读取数据：
-- -------------------- ---- -------
------ - ----- - ---- --------------
------ - -------- - ---- --------------
------ ----- ----------- - ------- --------- -- ------------
------ ----- ---------------- -
------ - --------------------------
----------- -
-------------------------------
-
-在这里，我们创建了一个名为 selectCount 的 selector，它接收一个 AppState 对象并返回 count 属性的值。在组件中，我们使用 store.select 方法来将 selectCount 这个 selector 绑定到组件的 count$ 属性上，这样每当 store 的 state 更新时，count$ 属性就会自动更新。
在模板中，我们使用 count$ 属性来显示 state 中的值：
<h2>Current Count: {{ count$ | async }}</h2>结语
ngmrx 提供了简洁的 API 和强大的功能，可以帮助我们更好地管理应用中的状态数据。通过深入了解 ngmrx 的核心概念和实际应用，可以让我们更高效地进行大型项目的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb781e8991b448dc6a1