NGRX selector requests data before it's available in the store

Question

When the user selects an item on the screen an action is triggered that requests data from the api and loads that data into the store for the selected item.

A selector is used to grab specific pieces of that returned data to create a graph.

The selector is returning undefined because the store doesn't have that data yet.

I either need the store/action/dispatch to signal to the call to the selector that it's ready OR allow the selector to keep requesting until it has the data it's looking for:

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);
});

The dispatch:

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

Answer 1

You can make use of the RxJS filter operation.

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

I either need the store/action/dispatch to signal to the call to the selector that it's ready OR allow the selector to keep requesting until it has the data it's looking for:

A selector is an RxJS observable, everytime its data is changed it will emit a new value. Meaning that you don't need to notify the selector to update.

Answer 2

Similar to the point @timdeschryver said, "A selector is an RxJS observable, everytime its data is changed it will emit a new value. Meaning that you don't need to notify the selector to update." my selector wasn't picking up the update to the store, because there wasn't anything telling my selector that the store updated. My selector filters the store data rather than watching for a direct change to the items in the store.

I have another selector that's looking for changes on specific items. I subscribed to that selector and nested my selectFlyoutTimelineBar selector inside there which basically says, "when the item you selected is updated grab the graphdata because it's available now"