There is a feature switcher that changes the appearance of the application visually. It only returns boolean values.
I have a service with a button in the header that triggers the following function:
@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 }));
}
}
Next, let's look at the header code:
toggleTheme(theme: boolean): void {
this.themeService.setTheme(theme);
}
Here's how it looks in the HTML:
<mat-slide-toggle
[checked]="themeService._darkTheme$$ | async"
(change)="toggleTheme($event.checked)"
></mat-slide-toggle>
The data in the storage gets updated properly. However, when creating a module effect, I encounter multiple errors.
This is the effect for the storage:
@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);
}),
);
});
}