如何解决可观察到的Redux:操作完成后组件如何订阅以做出反应?
假设此演示代码:
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操作何时完成(即由reducer处理) ),它将执行一个回调。像这样:
const myComponent = () => {
ofActionSuccessful('PONG').subscribe( () => console.log('PONG has just completed'));
}
类似https://www.ngxs.io/advanced/action-handlers
我该如何实现?
我不想在化简器中链接某些逻辑,因为它与该组件严格相关,与存储无关。
解决方法
在化简器已经收到它们之后,史诗与正常的Redux分发通道并排运行-因此您不能“吞咽”进来的动作。动作始终会在您的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));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。