将react挂钩与redux-saga（或任何其他中间件）结合使用

Question

在此之前已经问过这个问题，但是我还没有找到合适的答案，只是想知道我是否错过了什么，或者实际上是否目前无法实现。

具体地说，钩子和redux-saga（或任何其他中间件）之间有2个主要区别：

1. 在redux-saga中，我可以在动作分派上触发代码执行，而在挂钩中，我只能在状态更改时触发代码执行。这两个并不总是相等的
2. 挂钩必须存在于组件的上下文中，但是某些“后台”逻辑（例如初始化，位置检测等）与特定的组件无关。在redux-saga中，我可以灵活地在“全局范围”中定义它，而在挂钩中，我必须将其附加到某些“随机”组件（可能是App或任何其他高级组件）上。

那么，是否有可能在这两种方法之间以某种方式“桥接”，还是我应该针对每种特定情况简单地选择最合适的技术？

Answer 1

它们是解决不同问题的不同工具。挂钩在内部工作于功能组件的状态和生命周期。 Redux在内部工作于整个React应用的状态和生命周期。 Sagas帮助解决诸如外部数据获取之类的异步影响。

通常来说，您想尽可能地限制变量和逻辑的范围。如果特定的“状态”仅与单个组件相关，则将其保持在组件状态。但是，如果几个组件或应用程序本身需要它，则将其存储在应用程序状态下。异步调用也是如此。如果只有一个组件使用单个外部调用，则将其保留在那里，但是如果多个组件可以进行相同的外部异步调用，则由sagas处理。

您可以自由使用每个组件中解决问题所需的数量，或者随意使用

。

Answer 2

1. 在Redux-saga中，您只能在操作分派时执行代码。钩子更为通用，例如，使用useReducer钩子，您可以在动作分派时触发代码，而使用useEffect钩子，您可以在装入/更新/卸载时触发代码。
2. Redux-saga也存在于组件的上下文中，或更确切地说，整个Redux存在于（通常是顶级）商店提供程序组件中，而Redux-saga只是其中间件之一。因此，基本上，如果您有一些全局应用程序逻辑并将其挂在App组件中，则它不是某个随机组件，这是将逻辑放入其中的正确位置。 / li>

我最近还找到了一个简单的库https://www.npmjs.com/package/use-saga-reducer，该库将sagas引入到React的useReducer中。 （我仍然不确定这是个好主意-只是因为您不能代表您应该这样做，对我来说，钩子异步函数通常就足够了，但这至少很有趣）