在redux-observable中 - 如何在不返回该操作值的情况下"中流"调度操作?

Rod*_*wan 8 reactjs redux rxjs5 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
   }));
Run Code Online (Sandbox Code Playgroud)

但是,不推荐使用store.dispatch(),并且不建议在redux-observable中使用store.dispatch().

我试图使用几乎所有合理的操作符,但仍然无法在不中断下一个链接函数中的返回值的情况下调度操作.我认为像te一样的东西应该这样做:

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

但不幸的是,这里有两个问题:

  • 没有调度load-action(值IS作为observable返回)
  • api请求现在返回一个包装的promise而不是mappable值

我真的很感激这里的一些帮助或建议,因为我找不到任何方法让这个工作.

提前致谢

Rob*_*ley 5

第二种形式走在正确的道路上。这个想法是返回一个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))));
  });
Run Code Online (Sandbox Code Playgroud)

Observable.fromPromise()将 a 转换Promise为 anObservable