reactjs - 在 redux-observable 中 - 如何调度操作 "mid-stream"而不返回该操作的值？

Question

我到处搜索都找不到以下问题的答案......

在我的 addItemEpic 中，我想在发送 ajax 请求之前分派(dispatch)一个“加载”操作 - 我不希望返回该操作的值 - 我只想执行该操作，然后返回 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 中已被弃用和不鼓励。

我尝试使用几乎所有可行的运算符，但仍然无法在不破坏下一个链接函数中的返回值的情况下分派(dispatch)该操作。我认为像下面这样的东西应该可以做到:

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

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

• 没有调度任何加载操作(值作为可观察值返回)
• API 请求现在返回一个包装的 Promise，而不是可映射的值

我真的很感谢这里的一些帮助或建议，因为我找不到任何方法来让它工作。

提前致谢

Answer 1

第二种形式是正确的。这个想法是返回一个 Observable，它首先发出加载操作，然后在服务调用之后发出 loaded 操作或 error 操作，最后发出完成的加载 Action 。

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