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