8

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

5 Answers 5

3

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.

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"

1

If the data is not available make the selector return null. Then in your sub you can filter null as follows:

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

This will cause the sub to execute only when the selector does not return null. PS your select statement should be inside the pipe()

2
  • That works - but I find skipWhile(x => x === null) a bit more readable
    – Alan Gee
    Commented Jun 12, 2020 at 10:53
  • 1
    There is a big difference between skipWhile vs filter though Commented May 11, 2022 at 14:57
1

It seems you need to define an initialState and make it the default value for your reducer.

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

Then in your reducer

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

It'll make sure to eliminate undefined and handle the store nicely before the value is available.

0

It seems like you're looking for combineLatest operator that emits when all source Observable emit at least one item and then on every emission from any source Observable. But it's hard to tell what exactly you want to do:

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

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

Maybe you don't even need to use map().

If the selector is another Observable and you need its value before making this.store.select(...) request you can chain it with concatMap for example:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.