有什么方法可以在NGRX（Angular）上的还原器中重复使用实体数据，以便没有多个API调用？

Question

有什么方法可以连接NGRX实体中的选择器和还原器？目前，我每次发送操作并进入还原器的这一部分时，我都在做一个API呼叫：

export class SearchComponent {
  constructor(private moviesService: MoviesService, private store: Store) {}

  searchFieldChanged(query: string) {
    this.moviesService
      .getMovies()
      .subscribe((movies) =>
        this.store.dispatch(retrievedMovieListFiltered({ movies, query }))
      );
  }
}

。

export const moviesReducer = createReducer<PopularMovieState>(
  initialState,
  on(retrievedMovieList, (state, { movies }) =>
    movieAdapter.addMany(movies, state)
  ),
  on(retrievedMovieListFiltered, (state, { movies, query }) =>
    movieAdapter.setAll(
      movies.filter((movie) => movie.title.includes(query)),
      { ...state }
    )
  )

。

我想找到一种方法，每次用户键入字符时，都可以在不提供API调用的情况下进行查询。

换句话说，有什么办法可以使用我编写的其他选择器（最后一个）：

export const moviesFeatureSelector =
  createFeatureSelector<PopularMovieState>('movies');

const { selectEntities, selectAll } = movieAdapter.getSelectors();

export const selectMoviesEntities = createSelector(
  moviesFeatureSelector,
  selectEntities
);

export const selectMovies = createSelector(moviesFeatureSelector, selectAll);

export const selectMovie = createSelector(
  selectMoviesEntities,
  selectRouteParams,
  (movies, { movieId }) => movies[movieId]
);

export const selectFilteredMovies = (title: string) =>
  createSelector(selectMovies, (movies) =>
    movies.filter((movie) => movie.title.includes(title))
  );

并将其应用于还原器？我的意思是，我需要更新是否正确解释。

如果是USEFU，我可以提供我的回购链接

Answer 1

由于您在NGRX之外执行请求，因此可以在组件初始化时加载电影，然后在用户输入上过滤它们

export class SearchComponent {
  constructor(private moviesService: MoviesService, private store: Store) {}

  ngOnInit(){
    this.moviesService
      .getMovies()
      .subscribe((movies) =>
        this.movies = movies
      );
  }

  movies: any[] = [];

  searchFieldChanged(query: string) {
    this.store.dispatch(retrievedMovieListFiltered({ this.movies, query })) 
  }
}