NgRx 中如何进行状态管理？（含示例）

在 Angular 应用中，使用 NgRx 进行状态管理可以帮助您有效地管理应用的状态和数据流。以下是一个简单的示例，详细说明如何使用 NgRx 进行状态管理。

假设您有一个待办事项列表，您希望使用 NgRx 来管理这个列表的状态。

步骤 1：安装 NgRx 相关包

首先，确保您的 Angular 项目中已经安装了 @ngrx/store 和 @ngrx/effects 相关的包。您可以使用 Angular CLI 或 npm/yarn 来安装这些包。

npm install @ngrx/store @ngrx/effects

1
2

步骤 2：定义状态（State）

在应用中定义您的状态对象。在这个示例中，我们将创建一个包含待办事项数组的状态对象。

// app.state.ts

export interface AppState {
  todos: Todo[];
}

export interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

1
2
3
4
5
6
7
8
9
10
11
12

步骤 3：创建 Actions

创建用于描述状态变化的 action 对象。在这个示例中，我们将创建添加、删除和切换完成状态的 actions。

// todo.actions.ts

import { createAction, props } from '@ngrx/store';

export const addTodo = createAction('[Todo] Add Todo', props<{ text: string }>());
export const deleteTodo = createAction('[Todo] Delete Todo', props<{ id: number }>());
export const toggleTodo = createAction('[Todo] Toggle Todo', props<{ id: number }>());

1
2
3
4
5
6
7
8

步骤 4：创建 Reducers

创建 reducers 来处理 action 并更新状态。reducers 是纯函数，根据当前状态和 action 来智能地处理状态更新。

// todo.reducer.ts

import { createReducer, on } from '@ngrx/store';
import { addTodo, deleteTodo, toggleTodo } from './todo.actions';

export const initialState: Todo[] = [];

const _todoReducer = createReducer(
  initialState,
  on(addTodo, (state, { text }) => [...state, { id: state.length + 1, text, completed: false }]),
  on(deleteTodo, (state, { id }) => state.filter((todo) => todo.id !== id)),
  on(toggleTodo, (state, { id }) =>
    state.map((todo) => (todo.id === id ? { ...todo, completed: !todo.completed } : todo))
  )
);

export function todoReducer(state: Todo[] | undefined, action: any) {
  return _todoReducer(state, action);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

步骤 5：配置 Store

在 Angular 应用的 app.module.ts 中配置 store。

// app.module.ts

import { StoreModule } from '@ngrx/store';
import { todoReducer } from './todo.reducer';

@NgModule({
  imports: [
    // ...
    StoreModule.forRoot({ todos: todoReducer }),
  ],
  declarations: [
    // ...
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

步骤 6：在组件中使用 Store

在组件中使用 Store 来访问和更新状态。

// todo.component.ts

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { addTodo, deleteTodo, toggleTodo } from './todo.actions';
import { AppState, Todo } from './app.state';

@Component({
  selector: 'app-todo',
  template: `
    <div>
      <input [(ngModel)]="newTodoText" placeholder="New Todo" />
      <button (click)="addTodo()">Add</button>
    </div>
    <ul>
      <li *ngFor="let todo of todos">
        <input type="checkbox" [(ngModel)]="todo.completed" (change)="toggleTodo(todo.id)" />
        {{ todo.text }}
        <button (click)="deleteTodo(todo.id)">Delete</button>
      </li>
    </ul>
  `,
})
export class TodoComponent {
  newTodoText = '';
  todos: Todo[] = [];

  constructor(private store: Store<AppState>) {
    store.select((state) => state.todos).subscribe((todos) => (this.todos = todos));
  }

  addTodo() {
    if (this.newTodoText) {
      this.store.dispatch(addTodo({ text: this.newTodoText }));
      this.newTodoText = '';
    }
  }

  deleteTodo(id: number) {
    this.store.dispatch(deleteTodo({ id }));
  }

  toggleTodo(id: number) {
    this.store.dispatch(toggleTodo({ id }));
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

这是一个简单的示例，说明了如何使用 NgRx 进行状态管理。您可以添加更多的 actions、reducers 和 effects 来处理更复杂的状态管理需求。使用 NgRx 可以帮助您更好地组织和维护您的 Angular 应用的状态。