redux-saga根据UI组件状态有条件地订阅工作人员

Question

我有一个全局通用UI按钮组件(<ButtonRefresh />)，它存在于基本UI组件<ApplicationBase />中。假设我在ApplicationBase中有子组件，这些组件根据路由(如：HomePage、UserDetailPage、ProductsPage和ProductDetailPage等)呈现。在这些页面中可以有任意数量的其他组件，如UserEntity、ProductEntity、ProductEntityList等。

所有这些组件都应该能够实现自己的数据检索/显示逻辑。

当单击刷新按钮时，它会发出一个操作：APP_REFRESH。我有一个redux-传奇，它监视这个动作，并做一些背景工作(网络呼叫)：

function* appRefreshWatcher() { yield takeEvery(APP_REFRESH, appRefreshWorker); }

我的问题是，需要完成的后台工作取决于当前安装子组件的位置。我不想重新加载数据或更新没有显示的实体。

理想情况下，每个组件都能够侦听APP_REFRESH 操作，并运行自己的刷新工作人员saga - ，但只有在mounted.时才能这样做。

如何才能“刷新”仅活动(挂载)的组件？

Answer 1

你看过react-boilerplate回购的方法吗？https://github.com/react-boilerplate/react-boilerplate

您可以使用withSaga方法在组件旁边动态注入(并弹出) sagas。当组件挂载或卸载时，sagas被注入并从存储中弹出。这是一种与withReducer类似的recompose方法。回购中的示例：https://github.com/react-boilerplate/react-boilerplate/blob/master/app/containers/HomePage/index.js#L132

检查注入实现：https://github.com/react-boilerplate/react-boilerplate/blob/master/app/utils/injectSaga.js#L28。特别是关于HOC的componentWillMount和componentWillUnmount方法。

我认为您可以通过这种函数式编程方法来完成您想要的任务。

Answer 2

您可以使用反应-还原-路由器保存有关存储中当前路由的数据。

然后，您可以在选择中对数据进行appRefreshWorker，以便有条件地刷新数据。