探索 @ngrx/effects 中的 createEffect 用法与场景

华山风清扬
273 阅读3分钟

在 Angular 开发中，@ngrx/effects 是管理应用程序副作用（side effects）的重要工具。它通过使用 RxJS 提供了声明式的方式来处理异步操作，从而帮助我们维护状态的纯净性。其中，createEffect 是核心 API 之一，专门用于定义和管理 Effects。本文将详细探讨 createEffect 的用法及其适用场景。

什么是 createEffect

createEffect 是一个用于创建 Effects 的函数，它接收一个函数作为参数，返回一个 Effect 对象。Effects 是 @ngrx/effects 的核心概念，用于监听特定的 Actions 并触发某些副作用操作，比如调用 API 或导航到其他页面。

通过使用 createEffect，我们可以轻松定义副作用逻辑，同时保证代码的清晰性与可维护性。

语法和基本用法

createEffect 的基本语法如下：

import { createEffect } from '@ngrx/effects';

const effect = createEffect(() => action$.pipe(
  // RxJS 操作符链
));

以下是各个组成部分的解释：

  1. action$: 是一个特殊的流，它会发出所有的 Actions。
  2. pipe: 使用 RxJS 操作符定义副作用逻辑。
  3. 返回值：一个流，通常包含新的 Actions 或其他处理结果。

可选配置

createEffect 支持一个可选的配置对象，可以设置 dispatch 属性。如果 dispatch 为 false，该 Effect 不会发出新的 Actions，常用于执行不需要反馈结果的操作（例如日志记录）。

const effect = createEffect(() => action$.pipe(
  // RxJS 操作符链
), { dispatch: false });

使用场景分析

  1. 处理异步操作： 在许多应用中，我们需要从服务器获取数据或提交数据。createEffect 提供了一个声明式的方式来实现这些异步操作，并与状态管理完美结合。

  2. 跨组件通信： 在复杂的应用中，不同组件可能需要通过全局状态通信。Effects 能够监听某些 Actions 并在需要时触发新的 Actions，从而实现跨组件通信。

  3. 增强用户体验： 一些操作（如导航）需要附加副作用。通过 createEffect，可以轻松实现这些增强功能，例如自动跳转或弹出通知。

  4. 日志记录与监控： 在调试和监控场景中，createEffect 可以帮助捕获 Actions 并记录信息，以便于分析和追踪问题。

示例代码：实现用户数据加载

以下是一个实际示例，展示如何使用 createEffect 从 API 加载用户数据并更新状态：

定义 Action

import { createAction, props } from '@ngrx/store';

export const loadUsers = createAction(`[User] Load Users`);
export const loadUsersSuccess = createAction(
  `[User] Load Users Success`,
  props<{ users: any[] }>()
);
export const loadUsersFailure = createAction(
  `[User] Load Users Failure`,
  props<{ error: any }>()
);

创建 Effect

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { catchError, map, mergeMap, of } from 'rxjs';
import { UserService } from '../services/user.service';
import * as UserActions from '../actions/user.actions';

@Injectable()
export class UserEffects {
  constructor(private actions$: Actions, private userService: UserService) {}

  loadUsers$ = createEffect(() => this.actions$.pipe(
    ofType(UserActions.loadUsers),
    mergeMap(() => this.userService.getUsers().pipe(
      map(users => UserActions.loadUsersSuccess({ users })),
      catchError(error => of(UserActions.loadUsersFailure({ error })))
    ))
  ));
}

服务层实现

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
  private apiUrl = 'https://api.example.com/users';

  constructor(private http: HttpClient) {}

  getUsers(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl);
  }
}

Reducer 更新状态

import { createReducer, on } from '@ngrx/store';
import * as UserActions from '../actions/user.actions';

export interface UserState {
  users: any[];
  error: any;
}

const initialState: UserState = {
  users: [],
  error: null,
};

export const userReducer = createReducer(
  initialState,
  on(UserActions.loadUsersSuccess, (state, { users }) => ({
    ...state,
    users,
    error: null,
  })),
  on(UserActions.loadUsersFailure, (state, { error }) => ({
    ...state,
    error,
  }))
);

使用场景说明

通过上面的代码，我们可以看到 createEffect 的强大之处：

  1. 它简化了从 Action 到副作用的整个流程。
  2. 它能够轻松捕获成功或失败的结果并发出新的 Actions。
  3. 它很好地分离了业务逻辑与组件逻辑，使代码更具可维护性。

进阶使用：条件触发和多副作用

在实际项目中，常常需要根据特定条件触发某些逻辑或者为单个 Action 配置多个副作用。

条件触发

使用 filter 操作符可以根据条件选择性触发 Effect：

import { filter } from 'rxjs/operators';

const conditionalEffect = createEffect(() => this.actions$.pipe(
  ofType(UserActions.loadUsers),
  filter(() => someCondition()),
  mergeMap(() => this.userService.getUsers().pipe(
    map(users => UserActions.loadUsersSuccess({ users })),
    catchError(error => of(UserActions.loadUsersFailure({ error })))
  ))
));

多副作用

如果需要在一个 Effect 中触发多个副作用，可以使用 tap 操作符：

import { tap } from 'rxjs/operators';

const multiEffect = createEffect(() => this.actions$.pipe(
  ofType(UserActions.loadUsersSuccess),
  tap(({ users }) => console.log(`Loaded users:`, users)),
  tap(() => this.analyticsService.trackEvent(`UsersLoaded`))
), { dispatch: false });

使用注意事项

  1. 保持纯净性：Effect 逻辑应尽量保持纯粹，避免直接修改全局状态或引入副作用。
  2. 错误处理：始终使用 catchError 捕获错误，避免未捕获的错误导致流中断。
  3. 配置合理的 dispatch：只有在需要发出新 Action 时才将 dispatch 设置为 true。

总结

createEffect 是一个功能强大的工具，它将复杂的副作用处理逻辑与组件逻辑分离，从而使代码更加模块化和易于测试。通过合理使用 RxJS 操作符，我们可以在 Angular 应用中实现高效且优雅的状态管理。

avatar
文章
阅读
粉丝