CODEWITHSUNDEEP
javascriptangulartypescriptrxjsngrx
MarcelSauter
MarcelSauter

Reputation: 87

Ngrx selecting data after dispatch

im having a method to dispatch the action to query the account and select the account. I'm not sure if this is the best practice to select the data after dispatching.

this._store.dispatch(AccountsPageActions.loadAccountWithDetails({ accountId: this._accountId }));
this.account$ = this._actionsSubject.pipe(
  filter(action => action.type === AccountsApiActions.loadAccountWithDetailsSuccess.type),
  switchMap(() => this._store.select(getAccountDetailById(this._accountId)).pipe(
    tap(account => {
      this.account = account;
      this.accountId = this._accountId;
      this._reportsService.setAccount(account);
    })
  ))
);

Can someone tell me a better practice to do this or is this the way to go?

Upvotes: 1

Views: 2530

Answers (2)

mat.hudak
mat.hudak

Reputation: 3228

You don't need to listen to the action dispatch. If it's designed correctly, your action will update the state and the selector will be updated. This is enough

ngOnInit() {
  this._store.dispatch(AccountsPageActions.loadAccountWithDetails({ accountId: this._accountId }));

  // If you want to use the account$ with async pipe
  account$ = this._store.select(getAccountDetailById(this._accountId)).pipe(
    filter(account => !!filter), // ignore if no account is returned
    tap(account => {
      this.account = account;
      this.accountId = this._accountId;
      this._reportsService.setAccount(account);
    })
  ); // or .subscribe();
}

I would avoid listening to the action dispatches in the components, use effects for that.

Upvotes: 1

Fateh Mohamed
Fateh Mohamed

Reputation: 21387

I don't know why you need action subject, you can subscribe to actions using the code bellow and whenever there is a dispatch of that action it will trigger. keep action subscription in your constructor and then you can dispatch your action everywhere in your component

PLUCK is used to take the accountId value from the payload

import { Actions, ofType } from '@ngrx/effects';
import { map, pluck, switchMap, tap } from 'rxjs/operators';
...

constructor(private action: Actions) {
 const sub = this.action.pipe(
  ofType(AccountsApiActions.loadAccountWithDetailsSuccess.type),
  pluck('accountId'),
  switchMap((accountId) => this._store.select(getAccountDetailById(accountId)).pipe(
    tap(account => {
     this.account = account;
     this.accountId = this._accountId;
     this._reportsService.setAccount(account);
 }))).subscribe();
  
}

ngOnInit() {
  this._store.dispatch(AccountsPageActions.loadAccountWithDetails({ accountId: this._accountId }));
}

Upvotes: 0

Related Questions