调用传入 Redux 子应用的回调的最佳方式是什么？答案

【问题标题】：What's the best way to call callbacks passed into a Redux subapp?调用传入 Redux 子应用的回调的最佳方式是什么？
【发布时间】：2018-03-03 08:45:52
【问题描述】：

我正在遵循 Redux“子应用”模式 described here，但在找出调用传递到子应用的回调的最佳方法时遇到了一些麻烦，尤其是在响应异步操作时。

这是一个不优雅但有效的解决方案：https://jsfiddle.net/jochakovsky/bgx86m6j/。我不是这种方法的忠实拥护者——它迫使我将回调传递到比我想要的更远的位置，到 ReduxSubappView，它不应该知道任何关于回调的事情。调用回调最自然的地方是异步操作创建者initialize，但它无法访问传递给ReduxSubApp 的道具。此外，比较 props 和 nextProps 感觉很奇怪 - 演示组件实际上应该只负责将当前 props 转换为 UI，而不必了解状态转换。此外，ReduxSubappView 不能作为这种方法的纯函数组件。

处理这种情况的最佳方法是什么？

【问题讨论】：

我认为使用子应用的目的是隔离它们，因为它们彼此不关心。为了完成你想要的，我不会传递任何回调。相反，您可以让子应用在初始化时分派一个动作。此操作会在状态中设置一个标志，然后顶部应用程序会侦听更改并对其做出反应。
@RafaelRozon，我在一个分解的前端架构中工作，其中每个子应用程序都是独立编码的，只需要遵守某个 API。每个子应用程序都可以以任何方式构建——如果对特定子应用程序有意义的话，Redux 只是一个实现细节。我无法真正更改 API 或添加应用级 Redux 商店。

标签： javascript reactjs redux redux-thunk

【解决方案1】：

如果您不想从子应用根级别传递道具并且您不能在所有子应用中使用 redux，您将需要一个全局 pub/sub 或类似的东西来订阅变化。

这是addEventListener 的原生方法：

// in Subapp:
document.addEventListener('initialized', function(e){console.log('app initialized')});

// Wherever the event originates from:
document.dispatchEvent(new Event('initialized'));

一个专门的库可能会更好，因为这会让事件在 DOM 中冒泡（实际上没有任何原因），但它应该可以开箱即用。

【讨论】：