Angular 状态管理：不同选项的比较

Angular 状态管理：不同方法的完整指南

状态管理是现代 Angular 应用的关键组成部分。随着应用复杂性的增加，高效的状态管理变得愈发重要。在本指南中，我们将全面探讨 Angular 中不同的状态管理方案，从简单的服务到 NgRx 等复杂的解决方案，包括全新的 Signals 功能。

国家管理概论

状态管理指的是我们如何处理和维护应用程序中各个组件之间的数据。这些数据可能包括：

用户信息
应用程序设置
表单数据
API响应
UI状态（加载指示器、切换状态）

让我们深入探讨不同的方法，从最简单的解决方案到更复杂的解决方案。

1. 简单的基于服务的状态管理

Angular 中最基本的状态管理方法是使用带有可观察对象的服务。

实现示例

首先，我们来创建一个基本状态服务：

// user-state.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

interface User {
  id: number;
  name: string;
  email: string;
}

@Injectable({
  providedIn: 'root'
})
export class UserStateService {
  private userSubject = new BehaviorSubject<User | null>(null);
  user$ = this.userSubject.asObservable();

  setUser(user: User) {
    this.userSubject.next(user);
  }

  clearUser() {
    this.userSubject.next(null);
  }

  getCurrentUser(): User | null {
    return this.userSubject.getValue();
  }
}

在组件中使用该服务：

// user-profile.component.ts
import { Component, OnInit } from '@angular/core';
import { UserStateService } from './user-state.service';

@Component({
  selector: 'app-user-profile',
  template: `
    <div *ngIf="user$ | async as user">
      <h2>Welcome, {{ user.name }}!</h2>
      <p>Email: {{ user.email }}</p>
    </div>
  `
})
export class UserProfileComponent implements OnInit {
  user$ = this.userState.user$;

  constructor(private userState: UserStateService) {}

  ngOnInit() {
    // Simulating user login
    this.userState.setUser({
      id: 1,
      name: 'John Doe',
      email: 'john@example.com'
    });
  }
}

2. 角度信号：新的状态管理方法

Angular 16+ 中引入的信号提供了一种处理响应式状态管理的新方法。

基本信号实现

// counter.service.ts
import { Injectable, signal, computed } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CounterService {
  // Create a signal with initial value
  private count = signal(0);

  // Create a computed signal
  doubleCount = computed(() => this.count() * 2);

  increment() {
    // Update signal value
    this.count.update(current => current + 1);
  }

  decrement() {
    this.count.update(current => current - 1);
  }

  getCount() {
    return this.count;
  }
}

在组件中使用信号：

// counter.component.ts
import { Component } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <h2>Counter: {{ counterService.getCount()() }}</h2>
      <h3>Double Count: {{ counterService.doubleCount() }}</h3>
      <button (click)="counterService.increment()">Increment</button>
      <button (click)="counterService.decrement()">Decrement</button>
    </div>
  `
})
export class CounterComponent {
  constructor(public counterService: CounterService) {}
}

高级信号示例及 API 集成

// todo.service.ts
import { Injectable, signal, computed } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class TodoService {
  private todos = signal<Todo[]>([]);
  private loading = signal(false);

  // Computed signals
  completedTodos = computed(() => 
    this.todos().filter(todo => todo.completed)
  );

  pendingTodos = computed(() => 
    this.todos().filter(todo => !todo.completed)
  );

  constructor(private http: HttpClient) {}

  async fetchTodos() {
    this.loading.set(true);
    try {
      const response = await fetch('https://api.example.com/todos');
      const data = await response.json();
      this.todos.set(data);
    } finally {
      this.loading.set(false);
    }
  }

  addTodo(title: string) {
    const newTodo: Todo = {
      id: Date.now(),
      title,
      completed: false
    };
    this.todos.update(current => [...current, newTodo]);
  }

  toggleTodo(id: number) {
    this.todos.update(todos =>
      todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  }
}

3. NgRx：企业级状态管理

NgRx 提供了一个基于 Redux 原则的强大的状态管理解决方案。

设置 NgRx

首先，安装 NgRx：

npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools

实现示例

// todo.actions.ts
import { createAction, props } from '@ngrx/store';

export const loadTodos = createAction('[Todo] Load Todos');
export const loadTodosSuccess = createAction(
  '[Todo] Load Todos Success',
  props<{ todos: Todo[] }>()
);
export const loadTodosFailure = createAction(
  '[Todo] Load Todos Failure',
  props<{ error: any }>()
);

// todo.reducer.ts
import { createReducer, on } from '@ngrx/store';
import * as TodoActions from './todo.actions';
import { EntityState, createEntityAdapter } from '@ngrx/entity';

export interface TodoState extends EntityState<Todo> {
  loading: boolean;
  error: any;
}

export const todoAdapter = createEntityAdapter<Todo>();

export const initialState: TodoState = todoAdapter.getInitialState({
  loading: false,
  error: null
});

export const todoReducer = createReducer(
  initialState,
  on(TodoActions.loadTodos, state => ({
    ...state,
    loading: true
  })),
  on(TodoActions.loadTodosSuccess, (state, { todos }) =>
    todoAdapter.setAll(todos, { ...state, loading: false })
  ),
  on(TodoActions.loadTodosFailure, (state, { error }) => ({
    ...state,
    error,
    loading: false
  }))
);

// todo.effects.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { map, mergeMap, catchError } from 'rxjs/operators';
import * as TodoActions from './todo.actions';

@Injectable()
export class TodoEffects {
  loadTodos$ = createEffect(() =>
    this.actions$.pipe(
      ofType(TodoActions.loadTodos),
      mergeMap(() =>
        this.todoService.getTodos().pipe(
          map(todos => TodoActions.loadTodosSuccess({ todos })),
          catchError(error => of(TodoActions.loadTodosFailure({ error })))
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private todoService: TodoService
  ) {}
}

// todo.selectors.ts
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { TodoState, todoAdapter } from './todo.reducer';

export const selectTodoState = createFeatureSelector<TodoState>('todos');

export const {
  selectAll: selectAllTodos,
  selectEntities: selectTodoEntities,
  selectIds: selectTodoIds,
} = todoAdapter.getSelectors(selectTodoState);

export const selectLoading = createSelector(
  selectTodoState,
  state => state.loading
);

export const selectError = createSelector(
  selectTodoState,
  state => state.error
);

在组件中使用 NgRx：

// todo-list.component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import * as TodoActions from './store/todo.actions';
import * as TodoSelectors from './store/todo.selectors';

@Component({
  selector: 'app-todo-list',
  template: `
    <div *ngIf="loading$ | async">Loading...</div>
    <div *ngIf="error$ | async as error">Error: {{ error }}</div>
    <ul>
      <li *ngFor="let todo of todos$ | async">
        {{ todo.title }}
        <input
          type="checkbox"
          [checked]="todo.completed"
          (change)="toggleTodo(todo.id)"
        >
      </li>
    </ul>
  `
})
export class TodoListComponent implements OnInit {
  todos$ = this.store.select(TodoSelectors.selectAllTodos);
  loading$ = this.store.select(TodoSelectors.selectLoading);
  error$ = this.store.select(TodoSelectors.selectError);

  constructor(private store: Store) {}

  ngOnInit() {
    this.store.dispatch(TodoActions.loadTodos());
  }

  toggleTodo(id: number) {
    // Implement toggle action
  }
}

最佳实践和建议

根据应用规模选择：
- 小型应用：带有可观察对象的服务
- Medium 应用：Signals
- 大型应用：NgRx
国家结构：
- 保持状态正常化
- 避免重复数据
- 考虑使用不可变模式
性能考量：
- 使用选择器来获取派生状态
- 实施适当的记忆化
- 避免不必要的状态更新

常见问题解答

问：何时应该使用信号而不是带有 BehaviorSubject 的服务？
答：当您需要更细粒度的响应式控制和更高的性能时，请使用信号。它们对于频繁变化的 UI 状态尤其有用。

问：NgRx 对小型应用来说是不是过于复杂？
答：是的，对于小型应用来说，NgRx 会增加不必要的复杂性。建议先使用服务或信号，并在需要时再迁移到 NgRx。

问：我可以混合使用不同的状态管理方法吗？
答：可以，您可以为应用程序的不同部分使用不同的方法。例如，使用 Signals 管理 UI 状态，使用 NgRx 管理复杂的领域状态。

问：Signals 与 RxJS Observables 相比如何？
答：Signals 更简单、性能更高，适用于简单的状态管理，而 RxJS Observables 提供更强大的数据转换和组合操作符。

结论

Angular 提供了多种状态管理方法，每种方法都有其自身的优势：

使用 Observable 的服务：对于小型应用程序来说简单高效
Signals：用于响应式状态管理的现代化、高性能解决方案
NgRx：适用于大型应用程序的强大、可扩展的解决方案

根据团队规模、应用程序复杂性和可扩展性要求等因素，选择最适合您应用程序需求的方法。

文章来源：https://dev.to/chintanonweb/angular-state-management-a-comparison-of-the- Different-options-available-100e

菜单

分享

Angular 状态管理：不同选项的比较；Angular 状态管理：不同方法的完整指南

Angular 状态管理：不同选项的比较

Angular 状态管理：不同方法的完整指南

Angular 状态管理：不同方法的完整指南

国家管理概论

1. 简单的基于服务的状态管理

实现示例

2. 角度信号：新的状态管理方法

基本信号实现

高级信号示例及 API 集成

3. NgRx：企业级状态管理

设置 NgRx

实现示例

最佳实践和建议

常见问题解答

结论

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码