0

我有一部史诗

type GetRailwaysEpic = Epic<GetRailwaysActions, AppState>;

const getRailwaysEpic: GetRailwaysEpic = (action$, state$) =>
  action$.pipe(
    filter(isActionOf(getRailways.request)),
    switchMap(a =>
      getRailways(state$.value.mileages.filters.date)
        .then(getRailways.success)
        .catch(getRailways.failure)
    )
  );

当我在任何地方调用 actions.getRailways.request() 时，它按预期工作（首先请求操作，接下来是失败的成功）

我有另一个史诗

const initEpic: Epic<FiltersActions, AppState> = (action$, state$) =>
  action$.pipe(
    filter(isActionOf(init)),
    switchMap(({ payload: { date, depotId, locTypeId, railwayId } }) =>
      of(selectDate(date)).pipe(
        concat(
          forkEpic(getRailwaysEpic, state$, getRailways.request())
        )
      )
    )
  );

我的 ForkEpic 功能：

function forkEpic<T extends Action, S>(
  epicFactory: Epic<T, S>,
  state$: StateObservable<S>,
  ...actions: T[]
) {
  const actions$ = ActionsObservable.of(...actions);
  return epicFactory(actions$, state$, null);
}

我想要什么：'init' 动作 -> 'selectDate' 动作 -> 'getRailways.request' 动作 -> 'getRailways.success' | “getRailways.failure”操作

我所看到的：'init' 动作 -> 'selectDate' 动作 -> 'getRailways.success' | “getRailways.failure”操作

'getRailways.request' 动作在某处丢失。我做错了什么？

PS getRailways - 是一个返回 Promise PPS 的函数我在这里找到了类似的问题How to chain async actions and waiting for the result without store.dispatch 但这不是我真正想要的。

4

1 回答 1

0

所以问题是该forkEpic函数在getRailwaysEpic本地调用，并且因为它正在使用switchMap它正在吞噬“请求”动作，从而阻止它到达epicMiddleware。

最好的解决方案是将“选择”动作与“请求”动作流连接起来并将其返回，以便由 epicMiddleware 正确地将其传播回商店，然后getRailwaysEpic从 action$ 流中拦截和处理它。

这是代码沙箱中的工作解决方案： https ://codesandbox.io/s/375z2qwv1

这是负责的代码：

const requestEpic = action$ =>
  action$.pipe(
    filter(a => a.type === 'request'),
    switchMap(a => from(makeRequest()).pipe(map(success)))
  );

const initEpic = action$ =>
  action$.pipe(
    filter(a => a.type === 'init'),
    concatMap(a => of(select(), request()))
  );

const rootEpic = combineEpics(requestEpic, initEpic);
const epicMiddleware = createEpicMiddleware(rootEpic);

// 1
// store.dispatch(init());
// should be:
// init -> select -> request -> success

// 2
// store.dispatch(request());
// should be:
// request -> success
于 2018-05-23T14:05:22.857 回答