如何在调度一个动作后等待一个商店完成以调度第二个动作

Question

我有一个存储与我的组件相关的初始化数据，该数据的一个示例是带有 apiPath 的字符串。

   ngOnInit() {
       // this store contains data related to the component
       this.store.dispatch(this.searchActions.addPageData(this.pageData));
  }

然后我有另一个操作需要来自先前存储的数据，并在路由参数更改时触发：

this.route.params.subscribe((params: Params) => {
    this.store.dispatch(this.searchActions.routerParamsSearchPageChanged(pageFilters));
})

你如何等到第一个动作填满商店，然后再调度第二个动作。

Answer 1

我假设第一个操作 (addPageData) 使用一些信息填充存储。然后稍后，您想使用路由参数过滤掉数据，猜测某种类型的查询？如果此查询不适合您的需要，也许您可​​以详细说明一下。

基本上，检索您想要的商店信息和查询参数。按某种标准过滤该查询，这可能只是检查null，就像我一样，以确保数据存在。

 Observable.combineLatest(
        this.store.select(state => state.bookState),
        this.route.params.select<string>('query')
    )
    .filter(([bookState]) => bookState.books !== null)
    .subscribe(([books, query]) => {
        this.store.dispatch({
            type: '[Books] FILTER_BY_QUERY', 
            payload: {
                bookType: books.type,
                query: query
            }
        });
    });