如何解决 redux 副作用重叠？ (redux-observable)答案

【问题标题】：How to solve redux side-effects overlapping? (redux-observable)如何解决 redux 副作用重叠？ (redux-observable)
【发布时间】：2018-03-14 08:50:59
【问题描述】：

我有一个 Angular 4 应用程序，它使用 angular-router 在不同页面之间导航（我们称它们为 pageA 和 pageB）。 pageA 和 pageB 加载相同的项目列表 - sharedState.items（不时重新加载）。以下是这些页面的 redux 存储结构：

{
    pageA: { ... }
    pageB: { ..., noItemsMessage: null }
    sharedState: { items: [], popupMessage: null, ... }
}

从服务器成功加载项目后一切都很好（sharedState 得到更新，并且两个页面在导航到时都显示更改）。但是当服务器返回错误时会出现问题 - 我想在弹出窗口中的 pageA 上显示错误消息，使用 sharedState.popupMessage - 这是在在应用程序中弹出。但是在 pageB 上它应该是一个小的本地工具提示，它位于 pageB.noItemsMessage 状态属性中。

我注册了 redux-observable 史诗来监听 pageA 和 pageB 副作用的“LOAD_ITEM_FAIL”操作，但做不同的事情，例如：

pageALoadItemsFailEpic = actions$ => actions$.ofType('LOAD_ITEM_FAIL')
    .switchMap(x => { type: 'SHOW_POPUP', message: 'Error occured' })

pageBLoadItemsFailEpic = actions$ => actions$.ofType('LOAD_ITEM_FAIL')
        .switchMap(x => { type: 'UPDATE_PAGE_B_TOOLTIP', message: 'Error occured' })

问题是，当我在 pageB 上时 - 显示错误工具提示并弹出错误消息，因为 pageALoadItemsFailEpic 也被执行。（而且我不想在 pageB 上显示弹出窗口。）

最简单的方法似乎是跟踪当前导航到的页面并基于此执行副作用。但我想知道是否有更好的解决方案？或者有没有更好的方法来构建这种功能？有没有办法根据页面当前是否处于活动状态来打开/关闭史诗？提前致谢！

【问题讨论】：

标签： angular redux side-effects redux-observable

【解决方案1】：

我不使用redux，但使用ngrx，但我很确定原理是一样的。

您不应在组件之外显示/隐藏 UI 元素。你应该做的是在你的状态下拥有如下属性：

PageAErrors:any,
PageBErrors:any

然后您的 PageA 组件应该订阅 PageAErrors observable 并且 Page B 订阅 PageBErrors observable。然后每个组件自行决定在其兴趣（有错误）的可观察到的发出新值时要做什么（弹出窗口、气球、工具提示等）。

始终坚持基础：这是一种消息传递架构，松散耦合，组件史诗状态之间不应有直接的、命令式的链接。史诗触发动作，进而（通过 reducer）更新状态，组件监听并响应状态变化。

否则，您最终会在整个代码中维护仅属于组件（例如弹出式显示）的 UI 逻辑。

【讨论】：