第二次调度未触发ngrx 8效果



我有一个非常简单的ngrx结构,它从REST端点加载JSON数组并将其放入状态。它不是一次加载整个数组,而是按30个元素的页面加载,结果会附加到之前加载的内容上。所以这是一个典型的分页。负责整个操作的操作被重复调度,参数指定要加载的页码。它调用一个效果,而效果又调用一个服务的方法。

问题是,在第一次调用之后,操作根本没有运行。在第一次通话时,它工作得很好。在第二次、第三次等尝试时,它似乎在act()运算符之前停止,但它根本不会抛出任何错误或执行任何操作。

行动如下:

export const LoadSiteList = createAction(
ActionTypes.LoadSiteList,
props<{ page: number }>()
);

效果:

loadSiteList = createEffect(() => this.actions.pipe(
ofType(LoadSiteList),
act({
project: payload => {
return this.sitesService.loadSiteList(payload['page']).pipe(
map((siteList: Site[]) => UpdateSiteList({ siteList })),
)
},
error: () => { alert('Unable to load site list!'); return DoNothing() }
})
));

sitesService:中的服务方法

loadSiteList(page: number = 1): Observable<any> {
return Observable.create(observer => {
const temp = this.httpClient.get(`${environment.rootUrl}sites?_page=${page}`)
.subscribe(
data => observer.next(data),
error => observer.error(error),
() => temp.unsubscribe()
);
});
}

这就是我从我的组件中对它的称呼:

this.store.dispatch(LoadSiteList({ page: this.page }));

我确信这不是一个缺失的导入,因为那时它根本不起作用。服务方法中的unsubscribe()也没有故障。我试图在Type((和map()之间放置一个tap()运算符,它会触发,所以操作确实达到了目的。act()操作符的回调分支中的任何控制台输出都不会出现,因此操作符不会激发。但为什么呢?

以防万一,这里还有减速器的方法。但它永远不会被调用。

on(
SitesActions.UpdateSiteList,
(state, siteList) => ({
...state,
sites: [...state.sites, ...siteList.siteList]
})
),

没有什么比在感觉有点愚蠢的情况下回答自己的问题更好的了。所以看来bug是在管道结构上产生的效果。这是工作版本:

loadSiteList$ = createEffect(() => this.actions$.pipe(
ofType(LoadSiteList),
map(payload => payload['page']),
mergeMap(page => this.sitesService.loadSiteList(page)
.pipe(
map((siteList: Site[]) => UpdateSiteList({ siteList })),
catchError(error => { alert(`Error ${error.status} loading data.`); return EMPTY; })
))
));

另一个教训是:当你不想从你的效果中调度另一个动作时,ngrx有一个EMPTY值。你知道的越多。

最新更新