web-dev-qa-db-ja.com

ngrx / effect（redux-observable）で複数のアクションをディスパッチする方法は？

私はAngular 6、ngrx/storeを使用しています。物事を更新する責任があるような効果があります。ロジックによっては、異なるアクションをディスパッチしたいのです。switchMap instedを使用する場合の違いは何ですか？ of map？

これは私が試したものですが、うまくいきません：

 @Effect()
  dispathMultipleActions$ = this.actions$.pipe(
    ofType(ActionTypes.UpdateSomething),
    map(() => {
      const actions: Action[] = [];
      const array = [1, 2, 3, 4, 5];
      array.forEach(item => {
        if (item > 3) {
          actions.Push(new DeleteAction(item));
        } else {
          actions.Push(new ChangeAction(item));
        }
      });
      return actions;
    })
  );
javascriptangulartypescriptngrxngrx-store
7
mr__brainwash

エフェクトは一連のアクションを変換するため、入力および出力として一連のアクションがあります。この例では、アクションをアクションの配列にマップします。アクションの配列のストリームは有効な出力タイプではありません。その配列をフラット化する必要があります。つまり、配列自体を出力ストリームに放出せず、その各要素を放出します。

の代わりに：

input:  --a-------a------>
output: --[b,c]---[b,c]-->

やったほうがいい：

input:  --a-------a------>
output: --b-c-----b-c-->

配列のObservableを各要素のObservableにフラット化するには、演算子mergeMap、switchMap、exhaustMapのいずれかを使用できます。ほとんどの場合、mergeMapが正しい選択です。これらの演算子について詳しく知りたい場合は、この answer をご覧ください。

@Effect()
register$: Observable<Action> = this.actions$.pipe(
  ofType(AuthActionTypes.REGISTER_REQUEST),
  mergeMap((action: RegisterRequest) => {
    // check for register request success
    return [
      new RegisterSuccess(),
      new LoginRequest(action.payload)
    ]
  })
);
18
Kim Kern