angulartypescriptrxjs

Wait for store to update data before using it. Rxjs/Angular


I am using Angular with rxjs and I need to figure out a way to wait for the store to update its data after an action is dispatched to it to do something with that data. Here is what my relevant code looks like so far in my component.ts

  ngOnInit() {
  //subscribe to the store, get data from it
   this.store.pipe(select(selectors.getDataSelector)).pipe(takeUntil(this.destroy$)).subscribe(x => {
      this.data$ = x;
    });
  }

  updateData() {
    this.store.dispatch(new actions.getDataAction());
    // this action hits the http request, and stores the data in the store which is fetched with getDataSelector

    // now I need to do some condition that says `if the data in the store has completed updating after the action then do something
    if() {
      // do something with this.data$
    }
  }

Solution

  • As previously said I wouldn't react in the updateData function, but rather in a tap operator like so:

      ngOnInit() {
    
       // Don't pipe multiple times as you did before
       this.store.pipe(
         select(selectors.getDataSelector),
         takeUntil(this.destroy$),
         tap((data) => this.foo())
       )
       .subscribe((data) => {
         this.data$ = data;
       });
      }
    
      updateData() {
        this.store.dispatch(new actions.getDataAction());
      }
    
      foo() {
        // do side-effects
      }