redux-observableの場合-アクションの値を返さずにアクションを「ミッドストリーム」でディスパッチするにはどうすればよいですか?

ロディ・カーワン

どこでも検索しましたが、次の答えが見つかりません...

addItemEpicで、ajaxリクエストを送信する前に「読み込み」アクションをディスパッチしたいと思います-アクションの値を返したくありません-アクションを実行してからajax応答を返したいだけです。これは、以下のようにstore.dispatch()を使用して簡単に実現できます。

export const addItemsEpic = (action$, store) =>
  action$.ofType(ADD_ITEM)
    .do(() => store.dispatch({
        type: 'layout/UPDATE_LAYOUT',
        payload: { loading: true } 
    }))
    .switchMap(action => api.addItem(action.payload))
    .map(item => loadItem(item))
    .do(() => store.dispatch({
       type: 'layout/UPDATE_LAYOUT',
       payload: { loading: false } 
    }))
    .catch(error => Observable.of({
       type: 'AJAX_ERROR',
       payload: error,
       error: true
   }));

ただし、store.dispatch()は非推奨であり、redux-observableでは推奨されていません。

私はほとんどすべてのもっともらしい演算子を使用しようとしましたが、それでも次の連鎖関数の戻り値を中断せずにアクションをディスパッチすることはできません。私は次のような何かがそれをするべきだと思いました:

action$.ofType(ADD_ITEM)
   .concatMap(action => Observable.of(
      updateLayout({loading: true}),
      api.addItem(action.payload)).last())
   .map(item => loadItem(item))

しかし、残念ながらここでは2つの問題があります。

  • ロードアクションはディスパッチされません(値は監視可能として返されます)
  • apiリクエストは、マップ可能な値ではなく、ラップされたpromiseを返すようになりました

これを機能させる方法が見つからないので、ここでいくつかのヘルプやアドバイスをいただければ幸いです。

前もって感謝します

ロバートファーリー

2番目の形式は正しい道にあります。アイデアはObservable、最初にロードアクションを発行し、次にサービスコールの後に、loadedアクションまたはerrorアクションのいずれかを発行し、最後に完了したロードアクションを発行するを返すことです。

const addItemEpic = action$ => action$
  .ofType(ADD_ITEM)
  .switchMap(action => { // or use mergeMap/concatMap depending on your needs
    const apiCall$ = Observable.fromPromise(api.addItem(action.payload))
      .map(item => actions.loadItem(item))
      .catch(err => Observable.of(actions.ajaxError(err)));

    return Observable.concat(
      Observable.of(actions.updateLayout(true)),
      Observable.concat(apiCall$,
        Observable.of(actions.updateLayout(false))));
  });

Observable.fromPromise()をに変換PromiseしますObservable

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ