javascript 在ngrx上保存状态主题

6za6bjd0  于 2022-11-27  发布在  Java
关注(0)|答案(1)|浏览(126)

有一个主题切换器会影响应用程序的视觉外观。当然,它不会返回任何东西,而只返回布尔值。
我有一个服务,它的头中的一个按钮可以工作。实际上,它是这样的:

@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>

在存储本身中,数据被替换。
实际上是存储效果本身:

@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)),
      // ),
    );
  });
}
hwazgwia

hwazgwia1#

一个效果应该总是返回一个动作(因为这些动作被调度到存储)。从它的外观来看,themeService.setTheme并没有返回一个动作,而只是需要被调用的东西。这意味着你必须将这个效果定义为一个非调度效果。
https://ngrx.io/guide/effects/lifecycle#non-dispatching-effects

@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)),
      // ),
    );
  // 👇
  }, { dispatch: false});
}

附注:请在创建问题时提供错误。

相关问题