Ngrx 在发送后选择数据
Ngrx selecting data after dispatch
我有一种方法可以发送操作来查询帐户和 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);
})
))
);
有人可以告诉我更好的做法吗?或者这是可行的方法吗?
我不知道你为什么需要动作主题,你可以使用下面的代码订阅动作,只要有该动作的调度它就会触发。在你的构造函数中保持动作订阅,然后你可以在你的组件中的任何地方发送你的动作
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 }));
}
您不需要收听动作调度。如果设计正确,您的操作将更新状态并且选择器将更新。够了
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();
}
我会避免监听组件中的动作调度,为此使用效果。
我有一种方法可以发送操作来查询帐户和 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);
})
))
);
有人可以告诉我更好的做法吗?或者这是可行的方法吗?
我不知道你为什么需要动作主题,你可以使用下面的代码订阅动作,只要有该动作的调度它就会触发。在你的构造函数中保持动作订阅,然后你可以在你的组件中的任何地方发送你的动作
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 }));
}
您不需要收听动作调度。如果设计正确,您的操作将更新状态并且选择器将更新。够了
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();
}
我会避免监听组件中的动作调度,为此使用效果。