NgRx 数据管理实战指南

最新推荐文章于 2024-09-26 08:40:55 发布

原创最新推荐文章于 2024-09-26 08:40:55 发布 · 882 阅读

15 ·

CC 4.0 BY-SA版权

NgRx 数据管理实战指南

ngrx-course NgRx (with NgRx Data) -The Complete Guide 项目地址: https://gitcode.com/gh_mirrors/ng/ngrx-course

项目介绍

本仓库提供了NgRx（含 NgRx Data）全面指南 视频课程的配套源码。此课程已更新至 Angular v18 版本，旨在深入学习 NgRx 库及其在Angular应用程序中的高效使用。NgRx 是基于 Redux 模式的状态管理库，包括 NgRx Store、Effects、Entities 和 Data 等核心组件，帮助开发者以更可预测的方式管理应用状态。

项目快速启动

要快速启动并运行该示例项目，请遵循以下步骤：

安装必要工具：首先，确保你的系统中安装了 Node.js 的 18.x LTS 版本。可以使用 nave 或 nvm（依据操作系统选择合适的节点版本管理工具）进行版本切换。
```
npm install -g nave # 安装 nave（如果需要）
nave use 18        # 切换到 Node 18 版本
```

获取项目代码：使用 Git 克隆仓库至本地。

git clone https://github.com/angular-university/ngrx-course.git

环境准备：进入项目目录并全局安装 Angular CLI。
```
cd ngrx-course
npm install -g @angular/cli
```
启动应用：分别启动后端服务器和前端开发服务器。
```
# 启动后端服务
npm run server

# 在另一个终端窗口启动前端应用
npm start
```
前端应用将运行在 http://localhost:4200。

应用案例和最佳实践

在开发过程中，采用 NgRx 的最佳实践包括：

模块化设计：根据功能模块划分 NgRx 组件（Stores、Actions、Reducers）。
利用 NgRx Data 来简化数据服务层，它提供了一种结构化的方式来管理和查询来自服务器的数据。
效果（Effects） 的合理利用来处理副作用，如API请求，保持纯净的 reducer。
守卫和服务的结合，以保护路由并管理复杂的状态逻辑。

示例：数据加载流程

假设我们需要加载用户列表，可以通过创建一个简单的 Action、Reducer 和 Effect 来实现：

// user.actions.ts
export const LOAD_USERS = '[User] Load Users';
export const LOAD_USERS_SUCCESS = '[User] Load Users Success';
export const LOAD_USERS_FAILURE = '[User] Load Users Failure';

export class LoadUsers implements Action {
  readonly type = LOAD_USERS;
}

export class LoadUsersSuccess implements Action {
  readonly type = LOAD_USERS_SUCCESS;
  constructor(public payload: User[]) {}
}

export class LoadUsersFailure implements Action {
  readonly type = LOAD_USERS_FAILURE;
  constructor(public payload: string) {}
}

然后，在 Effects 中监听这些动作并调用服务：

// user.effects.ts
import { ofType } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { UserService } from './user.service';
import { LoadUsers, LoadUsersSuccess, LoadUsersFailure } from './user.actions';

@Injectable()
export class UserEffects {
  loadUsers$ = createEffect(() =>
    this.actions$.pipe(
      ofType(LoadUsers),
      exhaustMap(() => this.userService.loadAll().pipe(
        map(users => new LoadUsersSuccess(users)),
        catchError(error => of(new LoadUsersFailure(error.message)))
      ))
    )
  );

  constructor(private actions$: Actions, private userService: UserService) {}
}