ngrx 使用搜索参数更新 url

Question

我一直在查看ngrx 示例应用程序并尝试使用以下内容扩展它：

• 搜索书籍时，查询会作为查询参数写入 url 中，如下所示http://localhost:4200/book/find?query=book_title
• 当打开包含查询参数的 url 的页面时，应填充搜索输入框并显示搜索

做这样的事情的正确方法是什么？

我已经添加了我的解决方案，它可以完成工作，但我不确定它是否有任何好处。在其中，我将查询参数存储在两个看起来像反模式的地方

我的解决方案：

在 app/books/effects/books.ts 中的搜索效果中添加了路由器导航，以便每当触发搜索时，url 都会使用查询字符串进行更新

search$: Observable<Action> = this.actions$.pipe(
  ofType<Search>(BookActionTypes.Search),
  debounceTime(this.debounce || 300, this.scheduler || async),
  map(action => action.payload),
  switchMap(query => {
    if (query === '') {
      return empty();
    }

    const nextSearch$ = this.actions$.pipe(
      ofType(BookActionTypes.Search),
      skip(1)
    );

    return this.googleBooks.searchBooks(query).pipe(
      takeUntil(nextSearch$),
      map((books: Book[]) => {
// added //
        this.router.navigate([], {
          queryParams: { query: query },
          queryParamsHandling: 'merge',
        });
///////////
        return new SearchComplete(books);
      }),
      catchError(err => of(new SearchError(err)))
    );
  })
);

在 app/reducers/index.ts 中添加了路由器查询参数的选择器：

export const getRouterState = createFeatureSelector<
  fromRouter.RouterReducerState<RouterStateUrl>
>('router');

export const getQueryParams = createSelector(
  getRouterState,
  state => state.state.queryParams
);

在 app/books/containers/find-book-page.ts 中添加了该方法

urlQuery() {
// dispatch a search action if there is a query string in url
  this.store
    .pipe(select(fromRoot.getQueryParams), take(1))
    .subscribe(queryParams => {
      if (queryParams.query) {
        this.search(queryParams.query);
      }
    });
}

此方法是从 find-book-page 组件中的构造函数调用的，因此当加载此组件时，它将检查 url 中是否有查询字符串，如果有，则使用该查询字符串调度一个操作

constructor(private store: Store<fromBooks.State>) {
  this.searchQuery$ = store.pipe(select(fromBooks.getSearchQuery), take(1));
  this.books$ = store.pipe(select(fromBooks.getSearchResults));
  this.loading$ = store.pipe(select(fromBooks.getSearchLoading));
  this.error$ = store.pipe(select(fromBooks.getSearchError));

  this.urlQuery();
}