ngrx-actions 使用教程

ngrx-actions 使用教程

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

项目介绍

ngrx-actions 是一个用于简化 Angular 应用中 NgRx 状态管理的开源库。它通过提供一种更简洁的方式来定义和处理动作（actions）和效果（effects），从而减少了样板代码，使得状态管理更加直观和高效。

项目快速启动

安装

首先，你需要安装 ngrx-actions 库：

npm install ngrx-actions

配置

在你的 Angular 项目中，配置 NgRx 和 ngrx-actions：

// app.module.ts
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { NgrxActionsModule } from 'ngrx-actions';

@NgModule({
  imports: [
    StoreModule.forRoot({}),
    EffectsModule.forRoot([]),
    NgrxActionsModule.forRoot()
  ],
  // 其他配置
})
export class AppModule { }

定义动作和效果

使用 ngrx-actions 定义动作和效果：

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

export const login = createAction(
  '[Auth] Login',
  props<{ username: string, password: string }>()
);

export const loginSuccess = createAction(
  '[Auth] Login Success',
  props<{ token: string }>()
);

export const loginFailure = createAction(
  '[Auth] Login Failure',
  props<{ error: string }>()
);

// app.effects.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { AuthService } from './auth.service';
import { login, loginSuccess, loginFailure } from './app.actions';

@Injectable()
export class AuthEffects {
  constructor(
    private actions$: Actions,
    private authService: AuthService
  ) {}

  login$ = createEffect(() =>
    this.actions$.pipe(
      ofType(login),
      mergeMap(action =>
        this.authService.login(action.username, action.password).pipe(
          map(token => loginSuccess({ token })),
          catchError(error => of(loginFailure({ error })))
        )
      )
    )
  );
}

应用案例和最佳实践

应用案例

假设我们有一个简单的登录功能，用户输入用户名和密码后，系统会进行验证并返回结果。使用 ngrx-actions 可以简化这个过程：

// login.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { login } from './app.actions';

@Component({
  selector: 'app-login',
  template: `
    <form (ngSubmit)="onSubmit()">
      <input type="text" [(ngModel)]="username" name="username" required>
      <input type="password" [(ngModel)]="password" name="password" required>
      <button type="submit">Login</button>
    </form>
  `
})
export class LoginComponent {
  username: string;
  password: string;

  constructor(private store: Store) {}

  onSubmit() {
    this.store.dispatch(login({ username: this.username, password: this.password }));
  }
}

最佳实践

1. 模块化：将动作和效果分别放在不同的文件中，保持代码的模块化和可维护性。
2. 命名规范：使用一致的命名规范来定义动作，例如 [Scope] Action Type。
3. 错误处理：在效果中处理错误，确保应用的健壮性。

典型生态项目

ngrx-actions 可以与其他 NgRx 生态项目结合使用，例如：

• @ngrx/store-devtools：用于调试和可视化

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