如何在 Angular 中使用 NgRx？

推荐答案

在 Angular 中使用 NgRx 的步骤如下：

1. 安装 NgRx 依赖： 首先，确保你已经安装了 Angular CLI。然后，使用以下命令安装 NgRx 的核心库和工具：

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

2. 创建 Store： 在 app.module.ts 中导入 StoreModule 并配置你的初始状态和 reducers：

   // www.javascriptcn.com code example
   import { StoreModule } from '@ngrx/store';
   import { reducers } from './reducers';
   
   @NgModule({
     imports: [
       StoreModule.forRoot(reducers)
     ],
     // other module configurations
   })
   export class AppModule { }

3. 创建 Actions： 定义你的 actions，通常放在 actions 文件夹中：

   import { createAction, props } from '@ngrx/store';
   
   export const loadItems = createAction('[Items] Load Items');
   export const loadItemsSuccess = createAction('[Items] Load Items Success', props<{ items: Item[] }>());

4. 创建 Reducers： 在 reducers 文件夹中定义 reducers 来处理 actions：

   // www.javascriptcn.com code example
   import { createReducer, on } from '@ngrx/store';
   import { loadItemsSuccess } from '../actions/items.actions';
   
   export const initialState: ItemState = {
     items: []
   };
   
   const _itemsReducer = createReducer(
     initialState,
     on(loadItemsSuccess, (state, { items }) => ({ ...state, items }))
   );
   
   export function itemsReducer(state, action) {
     return _itemsReducer(state, action);
   }

5. 创建 Effects： 使用 @ngrx/effects 来处理副作用，例如 API 调用：

   // www.javascriptcn.com code example
   import { Injectable } from '@angular/core';
   import { Actions, createEffect, ofType } from '@ngrx/effects';
   import { loadItems, loadItemsSuccess } from '../actions/items.actions';
   import { map, mergeMap } from 'rxjs/operators';
   import { ItemsService } from '../services/items.service';
   
   @Injectable()
   export class ItemsEffects {
     loadItems$ = createEffect(() =>
       this.actions$.pipe(
         ofType(loadItems),
         mergeMap(() =>
           this.itemsService.getItems().pipe(
             map(items => loadItemsSuccess({ items }))
           )
         )
       )
     );
   
     constructor(private actions$: Actions, private itemsService: ItemsService) {}
   }

6. 在组件中使用 Store： 在组件中注入 Store 并分发 actions 或获取状态：

   // www.javascriptcn.com code example
   import { Component } from '@angular/core';
   import { Store } from '@ngrx/store';
   import { loadItems } from '../actions/items.actions';
   import { selectItems } from '../selectors/items.selectors';
   
   @Component({
     selector: 'app-items',
     templateUrl: './items.component.html'
   })
   export class ItemsComponent {
     items$ = this.store.select(selectItems);
   
     constructor(private store: Store) {}
   
     ngOnInit() {
       this.store.dispatch(loadItems());
     }
   }

本题详细解读

NgRx 的核心概念

NgRx 是一个基于 RxJS 的状态管理库，它帮助你在 Angular 应用中管理全局状态。NgRx 的核心概念包括：

• Store: 存储应用状态的单一数据源。
• Actions: 描述状态变化的动作。
• Reducers: 纯函数，根据 action 和当前状态生成新状态。
• Effects: 处理副作用（如 API 调用）的机制。
• Selectors: 用于从 store 中获取特定状态的函数。

为什么使用 NgRx？

• 可预测的状态管理: 通过 actions 和 reducers，状态变化变得可预测和可追踪。
• 易于调试: 使用 Redux DevTools 可以轻松调试应用状态。
• 代码组织: 将状态管理逻辑与组件分离，使代码更易于维护和扩展。

使用 NgRx 的步骤

1. 安装依赖: 安装 NgRx 的核心库和工具。
2. 创建 Store: 在 app.module.ts 中配置 store。
3. 定义 Actions: 创建 actions 来描述状态变化。
4. 创建 Reducers: 定义 reducers 来处理 actions 并更新状态。
5. 创建 Effects: 使用 effects 处理副作用，如 API 调用。
6. 在组件中使用 Store: 在组件中注入 store 并分发 actions 或获取状态。

注意事项

• 避免过度使用 NgRx: 对于小型应用，NgRx 可能会增加不必要的复杂性。
• 保持 actions 和 reducers 的纯净: 不要在 actions 或 reducers 中执行副作用操作。
• 使用 selectors 优化性能: 使用 selectors 来避免不必要的状态计算和渲染。

通过以上步骤和概念，你可以在 Angular 应用中有效地使用 NgRx 来管理状态。