Ngrx 在发送后选择数据

Question

我有一种方法可以发送操作来查询帐户和 select 帐户。我不确定这是否是发送后 select 数据的最佳做法。

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

有人可以告诉我更好的做法吗？或者这是可行的方法吗？

Answer 1

我不知道你为什么需要动作主题，你可以使用下面的代码订阅动作，只要有该动作的调度它就会触发。在你的构造函数中保持动作订阅，然后你可以在你的组件中的任何地方发送你的动作

PLUCK用于从payload

中获取accountId值

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

Answer 2

您不需要收听动作调度。如果设计正确，您的操作将更新状态并且选择器将更新。够了

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

我会避免监听组件中的动作调度，为此使用效果。

Ngrx 在发送后选择数据

Ngrx selecting data after dispatch

javascript

angular

typescript

rxjs

ngrx