随着前端技术的不断发展，越来越多的企业开始将 SPA (Single Page Application) 作为自己网站的主要开发方式，以提供更好的用户体验和更快的页面加载速度。而在 SPA 开发中，Angular 9 和 NgRx 已被广泛采用，用于数据管理和状态管理，提高了应用程序开发的效率和可靠性，让开发人员更加专注于前端业务逻辑的开发。
NgRx 是什么？
NgRx 是一个管理状态 (state) 和数据流 (data flow) 的库，基于 Redux 设计模式而来。通过使用 NgRx，我们可以将整个应用程序作为一个可预测的状态机来管理，使得应用数据的流动更加清晰、可追踪和可维护。
Angular 基础
在开始使用 Angular 9 和 NgRx 之前，您需要掌握以下 Angular 基础知识：
TypeScript: Angular 使用 TypeScript 作为开发语言，TypeScript 是 JavaScript 的超集，它添加了一些静态类型特性，提高了代码的可读性和可维护性。
RxJS: RxJS 是一种强大的事件响应库，它提供了一种响应式 (reactive) 编程模型，可以让您轻松地处理异步操作和事件流。在 Angular 中，RxJS 被广泛应用于处理表单输入、路由、HTTP 请求等事件流。
Angular CLI: Angular CLI 是一个基于命令行的工具，可以帮助您快速创建 Angular 项目、生成组件和服务、打包和部署应用程序，并提供了丰富的开发环境和构建工具。
NgRx 核心概念
在使用 NgRx 构建应用程序时，我们需要理解以下核心概念：
Store: Store 是 NgRx 最重要的核心概念之一，它类似于 Redux 的 store，用于存储应用程序的状态。Store 包含了应用程序的所有状态，每个状态都可以被视为一个 JavaScript 对象。
Action: Action 实际上是一个纯对象，它用于描述应用程序的状态变化。每个 Action 都包含一个 type 属性，用于指定状态变化的类型，以及一个可选的 payload 属性，用于传递状态变化的数据。
Reducer: Reducer 是用于处理状态变化的纯函数，它接收一个旧状态和一个 Action，返回一个新状态。Reducer 必须是一个纯函数，不能修改旧状态。
Effect: Effect 是用于处理异步操作和副作用的一种机制，它是基于 RxJS 的 Observable 可观察对象实现的。Effect 将 Action 和 Observable 组合在一起，用于处理异步操作。
NgRx 最佳实践
在使用 NgRx 构建 SPA 应用时，我们需要按照以下最佳实践：
尽量减少状态的数量，让状态集中。在构建应用程序时，我们需要尽量避免在多个组件之间传递状态。如果状态的数量过多，容易造成数据流的混乱，影响应用程序的维护性和可扩展性。
每个状态必须有一个唯一的标识符。在使用 NgRx 时，我们需要为每个状态定义一个唯一的标识符，以便跟踪状态的变化情况。通常情况下，我们可以使用 Action 的类型来定义状态的标识符。
每个组件只能订阅自己关心的事件流。在使用 NgRx 构建 SPA 应用时，我们需要避免让每个组件都订阅整个 AppState，因为它会导致性能问题。因此，我们需要仅仅让每个组件订阅自己关心的事件流，以提高应用程序的性能。
使用 Selector 对状态进行过滤。在使用 NgRx 时，我们可以通过定义 Selector 来对状态进行过滤，以便在组件中仅仅展示或监听自己关心的状态。Selector 是基于 RxJS 的 Observable 实现的，可以实现处理数据流的转换和过滤。
示例代码
以下是使用 Angular 9 和 NgRx 构建 SPA 应用的示例代码，通过该代码可以更好地理解 NgRx 的基本用法和最佳实践：
// javascriptcn.com 代码示例
import { createAction, createReducer, on, createSelector } from '@ngrx/store';
import { createEffect, Actions, ofType } from '@ngrx/effects';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { switchMap, map } from 'rxjs/operators';
// 定义 AppState
export interface AppState {
loading: boolean;
error: string;
data: any[];
}
// 定义 Action 类型
export const loadList = createAction('Load List');
export const loadListSuccess = createAction('Load List Success',
(list: any[]) => ({ list })
);
export const loadListFailure = createAction('Load List Failure',
(error: string) => ({ error })
);
// 定义 Reducer
export const initialState: AppState = { loading: false, error: '', data: [] };
export const appReducer = createReducer(
initialState,
on(loadList, state => ({ ...state, loading: true })),
on(loadListSuccess, (state, { list }) => ({ ...state, loading: false, data: list })),
on(loadListFailure, (state, { error }) => ({ ...state, loading: false, error: error }))
);
// 定义 Effect
@Injectable()
export class AppEffects {
loadList$ = createEffect(() =>
this.actions$.pipe(
ofType(loadList),
switchMap(() =>
this.http.get('http://api.example.com/list').pipe(
map((response: any) => loadListSuccess(response)),
catchError(error => of(loadListFailure(error)))
)
)
)
);
constructor(private actions$: Actions, private http: HttpClient) {}
}
// 定义 Selector
export const selectAppState = (state: any) => state.app;
export const selectLoading = createSelector(
selectAppState,
(state: AppState) => state.loading
);
export const selectError = createSelector(
selectAppState,
(state: AppState) => state.error
);
export const selectData = createSelector(
selectAppState,
(state: AppState) => state.data
);在上述示例代码中，我们定义了 AppState 状态、Action 类型、Reducer 和 Effect，它们分别用于描述应用程序的状态、状态变化的类型、状态变化的处理方法和副作用的处理方法。同时，我们还定义了 Selector，用于选择和过滤 AppState 中的数据。
在实际开发中，我们可以通过在组件的构造函数中注入 Store，然后通过 Store.select(selector) 来访问和过滤 AppState 中的状态和数据。
总结
通过使用 Angular 9 和 NgRx，可以更好地管理应用程序的状态和数据流，提高应用程序的可维护性和可扩展性。在实际开发中，我们需要遵循 NgRx 的最佳实践，减少状态的数量，使用 Selector 进行状态过滤，并为每个状态定义一个唯一的标识符。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6532d2017d4982a6eb5c91d0