どこでも検索しましたが、次の答えが見つかりません...
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つの問題があります。
これを機能させる方法が見つからないので、ここでいくつかのヘルプやアドバイスをいただければ幸いです。
前もって感謝します
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]
コメントを追加