【问题标题】:Using react hooks in conjunction with redux-saga (or any other middleware)将 react 钩子与 redux-saga(或任何其他中间件)结合使用
【发布时间】:2020-08-19 18:46:30
【问题描述】:

这个问题之前已经在这里问过了,但是我还没有找到任何正确的答案,只是想知道我是否遗漏了什么,或者这确实是目前不可能的。

具体来说,钩子和 redux-saga(或任何其他中间件)之间有两个主要区别:

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

那么,是否有可能在这两种方法之间以某种方式“架起”桥梁,或者我应该为每个特定情况选择最合适的技术?

【问题讨论】:

    标签: reactjs react-native redux react-hooks redux-saga


    【解决方案1】:

    它们是解决不同问题的不同工具。挂钩在内部工作于功能组件的状态和生命周期。 Redux 在内部工作于整个 React 应用程序的状态和生命周期。 Sagas 有助于解决异步效果,例如外部数据获取。

    一般来说,您希望尽可能地限制变量和逻辑的范围。如果特定的“状态”与单个组件相关,则将其保持在组件状态。但是,如果有几个组件或应用程序本身需要它,则将其存储在应用程序状态中。同样适用于异步调用。如果只有一个组件使用单个外部调用,请将其保留在那里,但如果多个组件可以进行相同的外部异步调用,则让 sagas 处理它们。

    您可以根据需要在每个组件中随意使用尽可能多或尽可能少的内容来解决您的问题。

    【讨论】:

    • 感谢您的澄清,这对我来说很有意义。我知道组件可以在本地使用钩子来跟踪 redux 状态的变化。我想我真正的问题是我是否可以以某种方式“概括”它们,并使用它们来处理一些通用的应用程序逻辑,无论是否使用 saga,但据我所知这是不可能的,我应该为此使用 redux-saga目的。
    • @Tamir 您完全可以创建自己的自定义挂钩来共享多个组件使用的逻辑。 reactjs.org/docs/hooks-custom.html 同样,这些钩子只能在功能组件中起作用,但可以与 redux/sagas 一起使用。
    • 我知道自定义钩子并且已经广泛使用它们,但是它们仍然不允许我在组件上下文中触发代码,以及响应动作与状态变化,如 redux-传奇让我
    【解决方案2】:
    1. 在 Redux-saga 中,您只能在操作分派时执行代码。钩子更通用,例如使用 useReducer 钩子可以触发动作调度代码,使用 useEffect 可以触发代码挂载/更新/卸载等。
    2. Redux-saga 也存在于组件的上下文中,或者更准确地说,整个 Redux 存在于(通常是顶级)存储提供程序组件中,而 Redux-saga 只是它的中间件之一。所以基本上,如果你有一些全局应用逻辑并在你的 App 组件中为它添加一个钩子,它不是一些随机组件,它是放置逻辑的正确位置。

    我最近还发现了一个简单的库 https://www.npmjs.com/package/use-saga-reducer,它将 sagas 引入 React 的 useReducer。 (我仍然不确定这是一个好主意 - 仅仅因为你可以并不意味着你应该,对我来说,钩子异步函数通常就足够了,但它至少很有趣)

    【讨论】:

    • 感谢您提供此信息,但是 useReducer 和 use-saga-reducer 都不使用 redux,而我已经在使用 redux 并想继续使用它,只是想知道是否可以将钩子附加到 redux行动而不是状态改变
    • 你对 redux 提出了一个很好的观点,它实际上也与特定组件相关,所以我猜对同一个(根)组件使用钩子是有意义的
    • 如果问题是你是否可以从 Redux reducer 调用钩子,那么不,你不能,但这甚至没有意义,因为钩子旨在将状态和生命周期逻辑放入功能组件.如果您需要 Redux 中的任何逻辑,请在 Redux 中实现它,然后您可以通过 useDispatch 从 hooks 中进行 Redux 操作。如果你觉得你需要从 Redux 调用一个钩子,这更有可能是糟糕设计的结果——当你需要这种方法时,也许可以用一个具体的例子来更新你的问题。
    • 虽然它真正的 sagas 响应被触发的动作,但它们实际上并不需要响应动作的内容。您可以编写 sagas 在任何地方触发任何操作时运行,然后比较先前和当前状态以决定是否应该执行代码。
    猜你喜欢
    • 1970-01-01
    • 2021-07-07
    • 2018-02-03
    • 2021-02-15
    • 2021-12-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多