0

假设我的应用中有一个列表和一个分页。我有这个状态：

{
  ...
  itemsPerPage: number;
  searchPhrase?: string;
}

另外，我必须有一个pageIndex（当前页号），并且我从 Url 获得它。为此，我有一个选择器：

export const getCurrentPageIndex = createSelector(
  selectRouteParam("pageIndex"),
  (pageIndex) => {
    return pageIndex ? parseInt(pageIndex, 10) : 1;
  }
);

我的路线有{:pageIndex}参数。到目前为止，一切都很好。

现在，我有一个处理加载当前页面数据的效果，它使用状态（包括pageIndex使用提到的选择器）获取所有必需的参数withLatestFrom()，然后从服务器请求数据。如此简单的场景，例如更改页面工作。

现在，想象有一个过滤器字段，用户可以在其中输入一些内容searchPhrase，然后我需要刷新页面，但我需要将当前页码 ( pageIndex) 设置为 1。这pageIndex来自路由器存储。所以，这就是我在效果中所做的：

  loadPageByNumber$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(MyActions.loadPageByNumber),
        tap((action) => {
          this.router.navigate([`/someroute/${action.pageIndex}`]);
        }),
        map(() => MyActions.loadPageOfData({}))
      )
    //{ dispatch: false }
  );

这就是问题所在。即使我navigate对新页面进行了处理，效果仍然会从路由器存储选择器中loadPageOfData()看到旧页面。pageIndex

例如，路由/items/30- 获取第 30 页数据。现在，用户输入搜索短语 - 状态发生变化，我需要重置pageIndex为 1（因为现在这是完全不同的数据集）。我的逻辑不起作用，pageIndex在加载数据效果中保持不变。

我该如何解决这个问题或者我在这里做错了什么？

4

0 回答 0