NGRX Actions 快速入门与实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00029/article/details/138598402

NGRX Actions 快速入门与实战指南

ngrx-actions ⚡️ Actions and Reducer Utilities for NGRX 项目地址: https://gitcode.com/gh_mirrors/ng/ngrx-actions

项目介绍

NGRX Actions 是一个专为 Angular 和 NGRX 设计的库（现在归档状态），它通过一系列实用函数来简化 NGRX/Redux 的使用流程，使得状态管理更加符合 Angular 开发者的编程习惯。此库提供了装饰器如 @Store, @Action 和 @Effect, 以及类结构化的 reducer 编写方式，旨在减少样板代码，并提高类型检查的效果，从而提升开发效率。

主要特性

使用装饰器简化 State、Action 和 Effect 的定义。
自动实例化新状态对象，避免手动浅拷贝。
支持更好的类型检查，减少硬编码的 action 类型。
提供简洁的 reducer 初始化和处理逻辑。
类式 reducer 方案，利于代码组织。

项目快速启动

安装 NGRX Actions

首先，你需要在你的 Angular 项目中安装 NGRX Actions：

npm i ngrx-actions --save

创建第一个 Action 和 Reducer

步骤 1: 定义 Action

创建一个新的 Action，比如 LoadDataAction:

export class LoadDataAction {
  readonly type = 'LOAD_DATA';
}

步骤 2: 使用装饰器定义 Reducer

接着，在一个类中使用 @Store 装饰器定义初始状态，并且使用 @Action 装饰器处理对应动作：

import { Store, Action } from 'ngrx-actions';

@Store({ data: [] })
class DataReducer {
  @Action(LoadDataAction)
  loadData(state: any, _action: LoadDataAction) {
    // 假设是从 API 获取数据并更新状态
    return { ...state, data: [...dataFromApi] };
  }
}

步骤 3: 创建 Reducer 函数

使用 createReducer 方法来初始化你的 reducer：

import { createReducer } from 'ngrx-actions';

export function rootReducer(state = initialState, action) {
  return createReducer(new DataReducer(), state, action);
}

最后，将这个 reducer 配置到你的 NGRX Store 中：

@NgModule({
  imports: [
    StoreModule.forRoot({ data: rootReducer }),
  ],
})
export class AppModule {}

应用案例和最佳实践

在实际项目中，利用 @Effect 可以进一步增强异步操作的管理能力。例如，自动处理加载数据的请求和响应：

import { ofAction } from 'ngrx-actions';
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { DataService } from './data.service';
import { LoadDataAction, DataLoadedAction } from './data.actions';

@Injectable()
export class DataEffects {
  loadUserData$ = createEffect(() =>
    this.actions$.pipe(
      ofType(LoadDataAction),
      switchMap(() => this.dataService.fetchData()),
      map(data => new DataLoadedAction(data))
    )
  );

  constructor(private actions$: Actions, private dataService: DataService) {}
}

确保在您的 Feature Module 或全局配置中注册这些 Effects。