NgRx 10 引入组件本地状态管理包

import { createAction, props } from '@ngrx/store';export const login = createAction(  '[Login Page] Login',  props<{ username: string; password: string }>()); 

onSubmit(username: string, password: string) {  store.dispatch(login({ username: username, password: password }));}

export interface MoviesState {  movies: Movie[];}@Injectable()export class MoviesStore extends ComponentStore<MoviesState> {  constructor() {    super({movies: []});  }}

@Component({  template: `    <li *ngFor="let movie of (movies$ | async)">      {{ movie.name }}    </li>  `,  providers: [ComponentStore],})export class MoviesPageComponent {  readonly movies$ = this.componentStore.state$.pipe(    map(state => state.movies),  );  constructor(    private readonly componentStore: ComponentStore<{movies: Movie[]}>  ) {}  ngOnInit() {    this.componentStore.setState({movies: []});  }}

@Injectable()export class MoviesStore extends ComponentStore<MoviesState> {  constructor(private readonly moviesService: MoviesService) {    super({movies: []});  }  // 每次调用getMovie(id)都会将当前ID推送到movieId$流中。  readonly getMovie = this.effect((movieId$: Observable<string>) => {    return movieId$.pipe(      // 处理竞态条件。      switchMap((id) => this.moviesService.fetchMovie(id).pipe(        // 在内部管道处理结果。        tap({          next: (movie) => this.addMovie(movie),          error: (e) => this.logError(e),        }),        // 在内部管道处理潜在的错误。        catchError(() => EMPTY),      ))    );  })  readonly addMovie = this.updater((state, movie: Movie) => ({    movies: [...state.movies, movie],  }));  selectMovie(movieId: string) {    return this.select((state) => state.movies.find(m => m.id === movieId));  }}

npm install @ngrx/component-store --save

ng add @ngrx/component-store@latest