Question

当用户在屏幕上选择一个项目时，将触发一个动作，该动作从api请求数据并将该数据加载到所选项目的商店中。

选择器用于获取返回数据的特定部分以创建图形。

选择器返回的是不确定的，因为商店还没有该数据。

我要么需要存储/操作/调度来向选择器发出信号，告知其已准备就绪，要么允许选择器继续请求，直到它拥有要查找的数据为止：

this.setItemDispatch(this.datetime, this.selectedItem, this.direction);

this.store.select(selectFlyoutTimelineBar(this.selectedItem, this.direction, 'Graph Title')).subscribe(x => {
  console.log('data returned:', x);
});

调度：

this.store.dispatch(
          new LoadStationArriveTimelineDataAction({
            station: selectedItem,
            start: { startDate: currentDate },
            query: this.codes,
            lineQuery: this.lineCode
          })
        );

Answer 1

类似于@timdeschryver所说的那样，“选择器是RxJS的可观察对象，每次更改其数据时，它将发出一个新值。这意味着您不需要通知选择器进行更新。”我的选择器没有选择商店的更新，因为没有任何东西告诉我的选择器商店已更新。我的选择器过滤商店数据，而不是监视商店中商品的直接更改。

我还有另一个选择器，它正在寻找特定项目的更改。我订阅了该选择器，并将我的selectFlyoutTimelineBar选择器嵌套在其中，该选择器基本上说：“当您选择的项目被更新时，请获取图数据，因为它现在可用了”

Answer 2

您可以使用RxJS filter操作。

this.store.pipe(
  select(selectFlyoutTimelineBar(this.selectedItem, this.direction, 'Graph Title')),
  filter(result => Boolean(result))
)

我要么需要存储/操作/发送信号，以通知对准备就绪的选择器，或者允许选择器继续请求直到找到所需的数据：

选择器是可观察到的RxJS，每次更改其数据时都会发出一个新值。这意味着您不需要通知选择器进行更新。

Answer 3

似乎您正在寻找combineLatest运算符，该运算符在所有源Observable都发射至少一项，然后在任何源Observable发射时发射。但是很难说出您到底想做什么：

const selector$ = action$.pipe(ofType(...))

combineLatest(this.store.select(...), selector$)
  .pipe(
    map([data, selector] => /* filter data or whatever */)
  )
  .subscribe(...)

也许您甚至不需要使用map()。

如果选择器是另一个Observable，并且在发出this.store.select(...)请求之前需要它的值，则可以将其与concatMap链接起来，例如：

selector$
  .pipe(
    concatMap(selector => this.store.select(...selector...))
  )
  .subscribe(...)

Answer 4

如果数据不可用，请使选择器返回null。然后在您的子目录中，可以按以下方式过滤null：

this.store.select(selectFlyoutTimelineBar(this.selectedItem, this.direction, 'Graph Title'))
  .pipe(
    filter(x => x != null)
  )
  .subscribe(x => {
    console.log('data returned:', x);
  });

仅当选择器不返回null时，这将导致sub执行。 PS您的选择语句应在pipe（）内

Answer 5

似乎您需要定义一个initialState并将其设置为减速器的默认值。

export const initialState: State = { prop1: null, prop2: null }

然后进入减速器

export class reducer(state: State = initialState, action: YourAction)

在值可用之前，请确保消除undefined并妥善处理商店。

NGRX选择器在存储中可用之前请求数据

5 个答案: