如何通过运算符链将多个值传递给映射运算符？在 NgRx 效应中

Question

我正在处理 Effect，其中我从 REST 端点加载新数据，然后分派操作以使用接收到的数据更新存储。连同 searchUrl 的组合，还有 newCurrentPage 的一些计算。

如何将 newCurrentPage 值与搜索请求一起传递给以下操作员？

代码如下所示：

@Effect()
tablePageChanged = this.actions$
    .pipe(
        ofType(action.tablePageChanged ),
        withLatestFrom(this.store.select('tableData')),
        switchMap(([action, tableData]) => {

            let newCurrentPage: number;
            let searchUrl: string;

            switch (action.navPage) {

                case NavigationPage.First:
                    newCurrentPage = 1;
                    searchUrl = tableData.devsTable.firstUrl;
                    break;

                case NavigationPage.Previous:
                    newCurrentPage = tableData.devsTable.currentPage - 1;
                    searchUrl = tableData.devsTable.previousUrl;
                    break;

                case NavigationPage.Next:
                    newCurrentPage = tableData.devsTable.currentPage + 1;
                    searchUrl = tableData.devsTable.nextUrl;
                    break;

                case NavigationPage.Last:
                    newCurrentPage = Math.ceil(tableData.devsTable.totalRecords / tableData.devsTable.pageSize);
                    searchUrl = tableData.devsTable.lastUrl;
                    break;

                default:
                    break;
            }

            // HERE: I want to return also 'newCurrentPage', so that I can pass it to 'handleSuccessfulResponse' later
            return this.http.get<UserSearchResponse>(searchUrl, {observe: 'response'});
        }),
        withLatestFrom(this.store.select('tableData')),
        map(([response, tableData]) => {

            // HERE: I want to get 'newCurrentPage' to pass it to the 'handleSuccessfulResponse' function
            return this.handleSuccessfulResponse(response, tableData);
        })
    );

这个 RxJS 对我来说很新，我还没有完全理解它，所以请明确。谢谢！

Answer 1

您可以将运算符移动到定义此变量的闭包中，如下所示：

switchMap(([action, tableData]) => {
  // ...
  return this.http.get<UserSearchResponse>(searchUrl, {observe: 'response'}).pipe(
    // `tableData` and `newCurrentPage` is available here
    map(response => this.handleSuccessfulResponse(response, tableData))
  );
})

或使用 map 运算符到 return 对 [response, newCurrentPage] 以便稍后使用

如何通过运算符链将多个值传递给映射运算符？在 NgRx 效应中

How to pass multiple values via operator chain to map operator? In NgRx Effect

javascript

rxjs

ngrx-effects

ngrx-store