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

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

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

步骤 1：安装 NgRx 相关包

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

npm install @ngrx/store @ngrx/effects

步骤 2：定义状态（State）

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

// app.state.ts

export interface AppState {
    
    
  todos: Todo[];
}

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

步骤 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 }>());

步骤 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);
}

步骤 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 {
    
    }

步骤 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 }));
  }
}

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

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

猜你喜欢