examples - ng-content select angular 4

despacha múltiples acciones en un efecto

Question

Me gustaría diapatch dos acciones en un solo efecto. Actualmente tengo que declarar dos efectos para lograr esto:

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

¿Es posible tener una acción, ser la fuente de dos acciones a través de un solo efecto?

Answer 1

Puede elegir mergeMap for async o concatMap for 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
    }));

Answer 2

Puedes usar switchMap y 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
    }));

El rendimiento importa:

En lugar de enviar muchas acciones que activarán a todos los suscriptores tantas veces como usted envíe , es posible que desee echar un vistazo a redux-batched-actions .

Esto le permite advertir a sus suscriptores solo cuando todas esas múltiples acciones se han aplicado a la tienda.

Por ejemplo :

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

Answer 3

también puedes usar .do () y store.next ()

do le permite adjuntar una devolución de llamada al observable sin afectar a los otros operadores / cambiar el observable

p.ej

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

(necesitarás una referencia a la tienda en tu clase de efectos)

Answer 4

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