Ngrx selecting data after dispatch-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

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