NgRx 的 Effects 是什么？

推荐答案

NgRx 的 Effects 是用于处理副作用（side effects）的机制。副作用通常是指那些不直接与组件状态相关的操作，例如与外部 API 的交互、浏览器存储操作等。Effects 通过监听 Actions 来触发这些操作，并在操作完成后派发新的 Actions 来更新应用状态。

本题详细解读

什么是 NgRx Effects？

NgRx Effects 是 NgRx 库中的一个关键概念，用于管理应用中的副作用。副作用是指那些不直接与组件状态相关的操作，例如：

• 与外部 API 的交互（如 HTTP 请求）
• 浏览器存储操作（如 localStorage 或 sessionStorage）
• 定时器操作（如 setTimeout 或 setInterval）

Effects 通过监听 Actions 来触发这些操作，并在操作完成后派发新的 Actions 来更新应用状态。

Effects 的工作原理

1. 监听 Actions：Effects 通过 createEffect 函数创建一个 Effect，该 Effect 会监听特定的 Actions。
2. 执行副作用：当监听到对应的 Action 时，Effect 会执行相应的副作用操作，例如发起 HTTP 请求。
3. 派发新的 Actions：在副作用操作完成后，Effect 会派发一个新的 Action 来更新应用状态。

示例代码

// www.javascriptcn.com code example
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { loadUsers, loadUsersSuccess, loadUsersFailure } from './user.actions';
import { UserService } from './user.service';

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

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

关键点

• createEffect：用于创建一个 Effect。
• ofType：用于过滤特定的 Actions。
• mergeMap：用于将多个 Observable 合并为一个。
• map 和 catchError：用于处理成功和失败的场景。

总结

NgRx Effects 是处理应用副作用的强大工具，它通过监听 Actions 来触发副作用操作，并在操作完成后派发新的 Actions 来更新应用状态。通过这种方式，Effects 帮助开发者将副作用逻辑与组件逻辑分离，使代码更加清晰和可维护。