Question

上下文

我对表单采取了很多操作：LOAD_XYZ，LOAD_XYZ_FAIL，LOAD_XYZ_SUCCESS，用于需要加载的不同页面元素。

我经常希望在某个项目加载后执行重定向（react-router），但由于redux-observable没有返回承诺，我无法在我的组件中执行重定向 - 但我必须这样做它使用redux中的push('...')和react-router-redux。

不幸的是，由于我有相同操作的LOAD_XYZ和LOAD_XYZ_REDIRECT_TO版本，加上每个版本的两个史诗，因此导致了大量重复。

这开始感到浪费并且冗余太多

const fetchUserEpic = action$ =>
  action$.ofType(FETCH_USER)
    .mergeMap(action =>
      ajax.getJSON(`https://api.github.com/users/${action.payload}`)
      .map(response => fetchUserFulfilled(response))
    );

const fetchUserAndRedirectEpic = action$ =>
  action$.ofType(FETCH_USER_AND_REDIRECT)
    .mergeMap(action =>
      ajax.getJSON(`https://api.github.com/users/${action.payload}`)
      .concatMap(response => [fetchUserFulfilled(response), push(action.redirectTo)])
    );

问题

是否存在某种模式/方法，我可以在某种异步请求完成后对要调度的操作进行排序，以避免冗余并且必须实现同一史诗的多个版本。

例如，我想要一个单独的REDIRECT_TO动作，我可以在项目加载后进行排序。

像这些（想象的）解决方案：

dispatch(fetchUser(...)).then(redirectTo("..."))
dispatchSequence(fetchUser(...), redirectTo("..."))

我知道redux-thunk可以做到这一点，但后来我错过了所有rxjs运算符。

Answer 1

我可能会陷入危险的境地，但我确实找到了办法。

首先，我们制作一个中间件，将操作中添加一个可观察的完成元数据。

import { Subject } from "rxjs";

export const AddListenerMiddleware = store => next => action => {
  const forkedAction = Object.assign({}, action, { meta: { listener: new Subject()}});
  next(forkedAction);
  return forkedAction.meta.listener.asObservable();
};

由于这是Subject，我们可以在其上调用next来发出一些值。创建notify帮助程序允许我们通知任何订阅者操作何时完成（以及传递数据）。

// notify doesn't consume but just emits on the completion observable
const notify = (action, fn) => source => 
  Observable.create(subscriber => 
    source.subscribe(emmission => {
      if (action.meta && action.meta.listener) {
        action.meta.listener.next(fn(emmission));
      }
      subscriber.next(emmission);
    })
  );

const fetchUserEpic = action$ =>
  action$.ofType(FETCH_USER)
    .mergeMap(action =>
      ajax.getJSON(`https://api.github.com/users/${action.payload}`)
      .map(response => fetchUserFulfilled(response))
      .pipe(notify(action, response => response.data))
    );

现在我们的调度返回一个observable，我们可以在其上执行标准的rxjs操作。所以这最终成为可能：

dispatch(fetchUser(...))
    .subscribe(({id}) => dispatch(redirectTo("/" + id)))

免责声明：使用风险自负！

在redux-observable中完成某些异步操作后，如何对redux操作进行排序？

上下文

问题

1 个答案: