如何在从商店选择之前等待发货完成。 Ngrx 相关问题

Question

在我从商店中选择之前，我如何等待发货完成。 在谷歌搜索中没有任何运气？ 在这种情况下，如何在从商店选择之前先等待派送完成？

我的代码，感谢支持的帮助。

**team-list.component.ts**

 teamsState: Observable<{teams: Team[]}>;

  constructor(private store: Store<fromApp.AppState>) { }

  ngOnInit() {
    this.store.dispatch(new TeamActions.GetTeams({
      search: this.search,
      limit: this.limit,
      skip: this.skip,
      sortBy: this.sortBy
    }));
    this.teamsState = this.store.select('teams');
  }

**team-list.component.html**

<mat-expansion-panel
    *ngFor="let team of (teamsState | async).teams; let i = index">
    <mat-expansion-panel-header>
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-1">{‌{ i+1 }}</div>
          <div class="col-md-1">
              <div class="post-image">
                <img [src]="imageUrl+team.imagePath" [alt]="team.name" style>
              </div>
          </div>
          <div class="col-md-10"> {‌{ team.name }} </div>
        </div>
      </div>
    </mat-expansion-panel-header>

effects
@Effect() // If you do not want to dispatch any actions, if need to modify store state then remove
    teamList = this.actions$.pipe(
        ofType(TeamActions.GET_TEAMS),
            map((action: TeamActions.GetTeams) => {
              return action.payload;
            }),
            switchMap((params: {search: string, limit: number, skip: number, sortBy: string}) => {
                return this.httpClient.get<Team[]>(
                  `${BACKEND_URL}?search=${params.search}&&limit=${params.limit}&&skip=${params.skip}&&sortBy=${params.sortBy}`);
            }),
            map((teams: Team[]) => {
                return {
                    type: TeamActions.SET_TEAMS,
                    payload: teams
                };
            }),
            catchError((err, caught) => {
              // console.log(err.error.errors);
              this.snackBarService.showSnackBar('Unable to Get Teams', true);
              return caught;
            })
        );

目前在第一次加载期间，调度操作尚未完成，当我从商店中选择项目时。 它目前是空的。

Answer 1

你不能，派遣是一场火灾，忘记你不能等待。

幸运的是，这不是必需的，因为this.store.select('teams')是一个 observable。 这意味着如果它发生变化，observable 将发出一个新值，这将导致您的组件重新渲染。

如果列表保持为空，您可以检查您的状态是否实际上已更新，这可以通过@ngrx/store-devtools 完成。 如果状态已更新但未显示在组件中，请确保您不直接修改状态，而是创建对数组的新引用。

Answer 2

您可以做的是在调度之前清除选择器并过滤响应：

fromApp.GetStuff.release();
// the state is now empty
this.store.dispatch(fromApp.FetchMyStuff);
// any previous value has been forgotten. The next defined value is just what you want
this.stuff = this.store.select(fromApp.GetStuff).pipe(
    filter(stuff => !!stuff)
);

请参阅https://ngrx.io/guide/store/selectors#resetting-memoized-selectors

Answer 3

看看以下是否适合你。

this.store.dispatch(new TeamActions.GetTeams({
      search: this.search,
      limit: this.limit,
      skip: this.skip,
      sortBy: this.sortBy
    }))
    .subscribe(() => {
        this.teamsState = this.store.select('teams');
    });

以上是每个 ngxs 状态管理框架。 更多 @ https://www.ngxs.io/advanced/actions-life-cycle#asynchronous-actions