How Do I reinitialize components or entire app in Angular when using ngrx?

Question

I have a User State that contains their current language. On click of a dropdown, the language is updated and the user state language is updated. The parent components (pages) contain the language logic, we have an Observable that is set by calling a userStore selector. Now, all store actions are dispatched in ngOnInit of the corresponding components. I can see the data being updated on language change; however, I want to dispatch an action on language change. How do I do this?

I am setting language like this:

    this.language$ = this.userStore.pipe(
  select(fromUser.getUserPreferredLanguage),
  map(lang => {
    return isNullOrEmpty(lang) ? "en" : lang;
  })
);

and I want to do something like

OnLanguageChange(){this.store.dispatch(action)}

And have that cascade down to the child components - so they reinitalize too

Answer 1

I'm not sure if I understood your architecture and what you want to achieve. But if you want to call a method every time your language observable fires, you could use the tap operator ( https://rxjs-dev.firebaseapp.com/api/operators/tap ):

this.language$ = this.userStore.pipe(
  select(fromUser.getUserPreferredLanguage),
  map(lang => {
   return isNullOrEmpty(lang) ? "en" : lang;
  }),
  tap(lang => this.OnLanguageChange(lang))
);