2
votes

Comment attendre la fin de l'envoi avant de faire votre choix dans un magasin. Problème lié à Ngrx

Comment puis-je attendre la fin d'une expédition avant de faire une sélection dans un magasin. Vous n'avez pas de chance dans Google? Dans ce cas, comment puis-je attendre que l'envoi soit effectué avant de sélectionner dans le magasin?

Mes codes, appréciez l'aide prise en charge.

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

**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>

angular node.js ngrx ngrx-effects ngrx-store-4.0

0 commentaires

3 Réponses :

2
votes

Vous ne pouvez pas, une expédition est un feu et oubliez que vous ne pouvez pas attendre.

Heureusement, ce n'est pas nécessaire car this.store.select ('teams') est un observable. Cela signifie que s'il change, l'observable recevra une nouvelle valeur et cela entraînera le rendu de votre composant.

Si la liste reste vide, vous pouvez vérifier si votre état est effectivement mis à jour, cela peut être fait avec @ ngrx / store-devtools . Si l'état est mis à jour mais qu'il ne s'affiche pas dans le composant, assurez-vous de ne pas modifier l'état directement, mais que vous créez une nouvelle référence au tableau.

2 commentaires

Salut, Actuellement, lorsque je charge la page pour la première fois, la liste est vide car elle ne définit pas encore d'état dans le magasin, mais je dois actualiser les articles, puis les articles seront dans le magasin. effets

Oui, les éléments seront automatiquement mis à jour sur la page lorsque vous définissez votre état. Si vous souhaitez d'abord charger les éléments, puis rendre la page visible, jetez un œil aux gardes - ultimatecourses.com/blog/preloading-ngrx-store-route-guards

0
votes

Voyez si ce qui suit fonctionne pour vous.

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

Ce qui précède est le cadre de gestion des états par ngxs. Plus @ https://www.ngxs.io/advanced/actions- cycle de vie # actions-asynchrones

0 commentaires

0
votes

Ce que vous pouvez faire est d'effacer le sélecteur juste avant l'envoi et de filtrer la réponse:

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

Voir https://ngrx.io/guide/store/selectors#resetting-memoized-selectors

0 commentaires