基于NGRX实现主题状态保存时的Effect报错问题排查

问题描述 #

现有一个通过布尔值控制的应用主题切换器，已实现ThemeService服务、头部组件切换逻辑及HTML模板，存储数据可正常更新，但创建ThemeEffect时出现大量错误。相关代码如下：

ThemeService代码 #

@Injectable({
  providedIn: 'root',
})
export class ThemeService {
  public _darkTheme$$: Observable<boolean> = this.store.select(selectChanges);

  constructor(private store: Store) {}

  setTheme(theme: boolean) {
    this.store.dispatch(changeTheme({ change: theme }));
  }
}

头部组件逻辑 #

toggleTheme(theme: boolean): void {
  this.themeService.setTheme(theme);
}

HTML模板 #

<mat-slide-toggle
   [checked]="themeService._darkTheme$$ | async"
   (change)="toggleTheme($event.checked)"
></mat-slide-toggle>

存在错误的ThemeEffect代码 #

@Injectable()
export class ThemeEffect {
  constructor(private actions$: Actions, private themeService: ThemeService) {}

  // @ts-ignore
  toggleTheme$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(changeTheme),
      mergeMap((change: { change: boolean }) => {
        return this.themeService.setTheme(change.change);
      }),
      // map(
      //   (i) => this.themeService.setTheme(i.change),
      //   catchError((err) => throwError(err)),
      // ),
    );
  });
}

错误原因分析 #

1. 无限循环触发：Effect中调用themeService.setTheme()，而该方法又会dispatchchangeThemeaction，导致Effect反复被触发，形成无限循环。
2. 返回值不符合要求：createEffect要求返回的Observable必须发射Action或者void（用于非触发式Effect），但setTheme()没有返回值，导致类型不匹配。
3. Effect职责错位：当前Effect的逻辑完全重复了组件的操作，Effect的核心作用应该是处理副作用（比如修改DOM、调用API、操作本地存储），而不是重复dispatch action。

修复方案 #

ThemeEffect的正确职责应该是监听changeThemeaction，然后执行实际的主题切换副作用（比如给body添加/移除dark类、修改CSS变量等），而不是再次dispatch action。修改后的代码如下：

修复后的ThemeEffect代码 #

@Injectable()
export class ThemeEffect {
  constructor(private actions$: Actions) {}

  toggleTheme$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(changeTheme),
      tap(({ change }) => {
        // 执行实际的主题切换副作用：比如修改DOM类名
        const body = document.body;
        change ? body.classList.add('dark-theme') : body.classList.remove('dark-theme');
        // 可选：持久化主题状态到本地存储
        localStorage.setItem('darkTheme', String(change));
      })
    );
  }, { dispatch: false }); // 配置dispatch:false，表明该Effect不需要发射新Action
}

额外优化建议 #

1. ThemeService初始化优化：在服务中添加初始化逻辑，从本地存储读取保存的主题状态，避免页面加载时主题不一致：

@Injectable({
  providedIn: 'root',
})
export class ThemeService {
  public _darkTheme$$: Observable<boolean> = this.store.select(selectChanges);

  constructor(private store: Store) {
    // 初始化时读取本地存储的主题配置
    const savedTheme = localStorage.getItem('darkTheme') === 'true';
    this.setTheme(savedTheme);
  }

  setTheme(theme: boolean) {
    this.store.dispatch(changeTheme({ change: theme }));
  }
}

2. 移除@ts-ignore：修复类型问题后，不需要再用注释掩盖错误，保证代码类型安全。

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