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

Question

我有一个基本的UI组件<ButtonRefresh />中存在的全局通用UI按钮组件（<ApplicationBase />）。可以说我在ApplicationBase中有子组件，它们根据诸如HomePage，UserDetailPage，ProductsPage和ProductDetailPage等路由来呈现。 在这些页面中可以包含任意数量的其他组件，例如UserEntity，ProductEntity，ProductEntityList等。

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

单击刷新按钮后，它将调度一个动作：APP_REFRESH。我有一个redux-saga，可以监视此操作并进行一些后台工作（网络通话）：

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

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

理想情况下，每个组件都可以侦听APP_REFRESH动作并运行自己的刷新工作器实例-但仅在安装时。

如何才能仅“刷新”活动（安装）的组件？

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

您可以使用react-redux-router将有关当前路线的数据保留在商店中。

然后，您可以select appRefreshWorker中的数据来有条件地刷新数据。