web-dev-qa-db-fra.com

envoyer plusieurs actions en un seul effet

Je voudrais diapatch deux actions en un seul effet. Actuellement, je dois déclarer deux effets pour y parvenir:

  // first effect
  @Effect() action1$ = this.actions$
    .ofType(CoreActionTypes.MY_ACTION)
    .map(res => {
      return { type: "ACTION_ONE"}
    })
    .catch(() => Observable.of({
      type: CoreActionTypes.MY_ACTION_FAILED
    }));

  // second effect
  @Effect() action2$ = this.actions$
    .ofType(CoreActionTypes.MY_ACTION)
    .map(res => {
      return { type: "ACTION_TWO"}
    })
    .catch(() => Observable.of({
      type: CoreActionTypes.MY_ACTION_FAILED
    }));

Est-il possible d'avoir une action, d'être la source de deux actions via un seul effet?

angularreduxngrx
25
Lev
@Effect()
loadInitConfig$ = this.actions$
    .ofType(layout.ActionTypes.LOAD_INIT_CONFIGURATION)
    .map<Action, void>(toPayload)
    .switchMap(() =>
        this.settingsService
            .loadInitConfiguration()
            .mergeMap((data: any) => [
                new layout.LoadInitConfigurationCompleteAction(data.settings),
                new meetup.LoadInitGeolocationCompleteAction(data.geolocation)
            ])
            .catch(error =>
                Observable.of(
                    new layout.LoadInitConfigurationFailAction({
                        error
                    })
                )
            )
    );
40
Javier González

Vous pouvez utiliser switchMap et Observable.of.

 @Effect({ dispatch: true }) action$ = this.actions$
    .ofType(CoreActionTypes.MY_ACTION)
    .switchMap(() => Observable.of(
        // subscribers will be notified
        {type: 'ACTION_ONE'} ,
        // subscribers will be notified (again ...)
        {type: 'ACTION_TWO'}
    ))
    .catch(() => Observable.of({
      type: CoreActionTypes.MY_ACTION_FAILED
    }));

La performance compte:

Au lieu d’envoyer de nombreuses actions qui déclenchent tous les abonnés autant de fois que vous expédiez , vous souhaiterez peut-être jeter un coup d’œil à redux- batched-actions .

Cela vous permet d'avertir vos abonnés uniquement lorsque toutes ces actions multiples ont été appliquées à la boutique.

Par exemple :

@Effect({ dispatch: true }) action$ = this.actions$
    .ofType(CoreActionTypes.MY_ACTION)
    // subscribers will be notified only once, no matter how many actions you have
    // not between every action
    .map(() => batchActions([
        doThing(),
        doOther()
    ]))
    .catch(() => Observable.of({
      type: CoreActionTypes.MY_ACTION_FAILED
    }));
10
maxime1992

Si quelqu'un se demande comment mélanger des actions simples avec celles des Observables.

J'étais coincé avec la même tâche, mais une petite différence: je devais envoyer deux actions, la deuxième après l'appel de l'API, ce qui en faisait un observable. Quelque chose comme:

  1. action1 n'est qu'une action: {type: 'ACTION_ONE'}
  2. action2 est un appel d’API mappé à l’action: Observable<{type: 'ACTION_TWO'}>

Le code suivant a résolu mon problème:

@Effect() action$ = this.actions$.pipe(
    ofType(CoreActionTypes.MY_ACTION),
    mergeMap(res =>
        // in order to dispatch actions in provided order
        concat(
            of(action1),
            action2
        )
    ),
    catchError(() => Observable.of({
        type: CoreActionTypes.MY_ACTION_FAILED
    }))
);

concat doc's

4
Yaremenko Andrii

Vous pouvez choisir mergeMap pour async ou concatMap pour sync

  @Effect() action$ = this.actions$
    .ofType(CoreActionTypes.MY_ACTION)
    .mergeMap(() => Observable.from([{type: "ACTION_ONE"} , {type: "ACTION_TWO"}]))
    .catch(() => Observable.of({
      type: CoreActionTypes.MY_ACTION_FAILED
    }));
4
Victor Godoy

vous pouvez également utiliser .do () et store.next ()

do vous permet de joindre un rappel à l'observable sans affecter les autres opérateurs/changer l'observable

par exemple.

@Effect() action1$ = this.actions$
.ofType(CoreActionTypes.MY_ACTION)
.do(myaction => this.store.next( {type: 'ACTION_ONE'} ))
.switchMap((myaction) => Observable.of(
    {type: 'ACTION_TWO'}
))
.catch(() => Observable.of({
  type: CoreActionTypes.MY_ACTION_FAILED
}));

(vous aurez besoin d'une référence au magasin dans votre classe d'effets)

2
JusMalcolm