Redux-observable：组件如何在动作完成时订阅以做出反应？

Question

假设这个演示代码：

const pingEpic = action$ => action$.pipe(
  filter(action => action.type === 'PING'),
  delay(1000), // Asynchronously wait 1000ms then continue
  mapTo({ type: 'PONG' })
);

// later...
dispatch({ type: 'PING' });

const pingReducer = (state = {}, action) => {
  switch (action.type) {
    case 'PING':
      return state;

    case 'PONG':
      return state;

    default:
      return state;
  }
};

在一个特定的组件中，假设与调度 PING 或 PONG 无关，也不使用任何 redux 状态，我想以某种方式订阅动作生命周期以及 PONG 动作何时完成（即已被处理）减速器）它执行回调。类似于：

const myComponent = () => {
  ofActionSuccessful('PONG').subscribe( () => console.log('PONG has just completed'));
}

类似于：https://www.ngxs.io/advanced/action-handlers

我怎样才能做到这一点？

我不想 link reducer 中的某些逻辑，因为它与该组件严格相关，与商店无关。

Answer 1

来自redux-observable docs：

Epics run alongside the normal Redux dispatch channel, after the reducers have already received them--so you cannot "swallow" an incoming action. Actions always run through your reducers before your Epics even receive them.

所以我们可以使用epics来获取“PONG”信号。

const allActions$ = new Subject();

// This must be merged into your root epic.
export const tapAllActions = (action$) =>
  action$.pipe(tap(allActions$), concatMapTo(EMPTY));

export const ofActionSuccessful = (actionType) =>
  allActions$.pipe(filter(({ type }) => type === actionType));

Redux-observable：组件如何在动作完成时订阅以做出反应？

Redux-observable: how a component can subscribe to react when action is completed?

reactjs

redux

rxjs

redux-observable