Angular中使用NgRx处理操作响应的优化方案咨询

给你几个更优雅的优化方案，按需选择：

1. 监听目标Action，触发后再订阅状态 #

组件里先监听对应的成功/失败Action，等Action触发后再去订阅状态，彻底避免初始加载时的触发问题。

示例代码：

import { Store } from '@ngrx/store';
import { Actions, ofType } from '@ngrx/effects';
import { loginSuccess, loginFailure } from './auth.actions';

@Component({...})
export class LoginComponent {
  constructor(private store: Store, private actions$: Actions) {}

  onLogin() {
    this.store.dispatch(login({ credentials: ... }));
    
    // 监听登录结果Action，触发后处理状态
    this.actions$.pipe(
      ofType(loginSuccess, loginFailure),
      take(1), // 只取一次结果，避免内存泄漏
      switchMap(() => this.store.select(selectLoginResult))
    ).subscribe(result => {
      if (result.success) {
        alert('登录成功');
      } else {
        alert('登录失败：' + result.error);
      }
    });
  }
}

2. 用RxJS操作符跳过初始状态 #

如果还是想直接订阅状态，可以用skipUntil操作符，跳过初始值，直到目标Action被分发后才开始处理状态更新。

示例代码：

import { Store } from '@ngrx/store';
import { Actions, ofType } from '@ngrx/effects';
import { login } from './auth.actions';
import { selectLoginResult } from './auth.selectors';

@Component({...})
export class LoginComponent implements OnInit {
  private destroy$ = new Subject<void>();

  constructor(private store: Store, private actions$: Actions) {}

  ngOnInit() {
    const loginTrigger$ = this.actions$.pipe(ofType(login));
    
    this.store.select(selectLoginResult).pipe(
      skipUntil(loginTrigger$), // 跳过初始值，直到login Action触发
      takeUntil(this.destroy$) // 组件销毁时取消订阅
    ).subscribe(result => {
      // 处理登录提示逻辑
    });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

3. 将副作用逻辑移至Effect处理 #

如果只是处理登录结果提示这类副作用，完全可以直接在Effect里完成，组件只需要分发Action，无需订阅状态，从根源解决初始订阅触发的问题。

示例代码：

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

@Injectable()
export class AuthEffects {
  login$ = createEffect(() =>
    this.actions$.pipe(
      ofType(login),
      switchMap(({ credentials }) =>
        this.authService.login(credentials).pipe(
          map(user => loginSuccess({ user })),
          catchError(error => of(loginFailure({ error })))
        )
      )
    )
  );

  loginSuccess$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loginSuccess),
      tap(() => this.alertService.showSuccess('登录成功！'))
    ), { dispatch: false } // 无需分发新Action，仅执行副作用
  );

  loginFailure$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loginFailure),
      tap(({ error }) => this.alertService.showError(`登录失败：${error.message}`))
    ), { dispatch: false }
  );

  constructor(
    private actions$: Actions,
    private authService: AuthService,
    private alertService: AlertService
  ) {}
}

4. 优化状态结构，过滤初始值 #

调整状态的初始值，让订阅时可以通过过滤初始状态来避免页面加载时触发。比如把操作结果的初始状态设为null，订阅时只处理非初始的状态。

状态定义示例：

export interface AuthState {
  loginResult: { success: boolean; error?: string } | null;
}

export const initialState: AuthState = {
  loginResult: null
};

// Reducer
export function authReducer(state = initialState, action: AuthActions): AuthState {
  switch (action.type) {
    case loginSuccess.type:
      return { ...state, loginResult: { success: true } };
    case loginFailure.type:
      return { ...state, loginResult: { success: false, error: action.error } };
    default:
      return state;
  }
}

组件订阅时过滤初始值：

this.store.select(selectLoginResult).pipe(
  filter(result => result !== null), // 过滤初始的null值
  takeUntil(this.destroy$)
).subscribe(result => {
  // 处理登录提示
});

内容的提问来源于stack exchange，提问作者Hamid