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 }));
}
}
最佳实践
- 模块化:将动作和效果分别放在不同的文件中,保持代码的模块化和可维护性。
- 命名规范:使用一致的命名规范来定义动作,例如
[Scope] Action Type
。 - 错误处理:在效果中处理错误,确保应用的健壮性。
典型生态项目
ngrx-actions
可以与其他 NgRx 生态项目结合使用,例如:
- @ngrx/store-devtools:用于调试和可视化