为啥使用 redux-thunk 或 redux-saga 进行 fetches？

Posted 2023-02-22

【中文标题】为啥使用 redux-thunk 或 redux-saga 进行 fetches？

【英文标题】：Why use redux-thunk or redux-saga for fetches?为什么使用 redux-thunk 或 redux-saga 进行 fetches？

【发布时间】：2017-04-26 18:23:52

【问题描述】：

我一直在阅读我应该使用 redux-thunk 或 redux-saga 来处理副作用。 为什么不简单地使用这样的动作创建者来调度多个动作：

function loadProductActionCreator(dispatch) 
  dispatch(
    type: 'load_product',
  )
  fetch('api/product').then(
    function (r) 
      return r.json();
    
  )
  .then(function (res) 
    dispatch(
      type: 'loaded_product',
      data: res
    )
  )

我试过了，它奏效了 (complete code)。所以我想肯定有一些我不知道的不便之处。

【问题讨论】：

您肯定可以这样做。当你手动为每个动作创建者创建包装器时（就像你在第 45-47 行所做的那样） - 你放弃并接受 redux-thunk。

所以这是唯一的好处？避免为此类任务创建多个操作？

如果您检查 redux-thunk 代码，您会看到它导出的函数只有 4（四）行代码 github.com/gaearon/redux-thunk/blob/master/src/index.js

哇。这里还有 Dan Abramov 的非常详细的解释：***.com/questions/35411423/…（来自 redux-thunk 主页）

你将如何测试它？ :D

【参考方案1】：

您的代码类似于 thunk 所做的。

根据redux 文档，操作应该是纯粹的。并且它们应该始终为相同的输入参数返回相同的值。通过使用fetch，您允许操作返回不是特定的值，而是来自服务器的值，这意味着操作响应可能会随时间而变化。

这就是所谓的副作用。这是默认情况下不应该出现在 redux 操作中的东西。

但是为什么呢？

是的，你可以像你一样在 action 中输入它，在小应用程序中没关系。

在更大的应用程序中使用redux-saga 有好处：

动作是可预测的，它们只是返回有效负载

  type: 'FETCH_POSTS',
  params: 
    category: 'programming'
  

然后您构建中间件，该中间件将对执行对真实 API 的请求所需的所有数据执行操作

可能的优势：

更简洁的代码库（但可能会在较小的应用程序上产生开销） 将“虚拟”操作与执行请求和实际 API 中间件所需的所有信息分开 请求参数在 redux 开发工具中直接可见 可以轻松地debounce、throttle 获取，这对于 redux-thunk 来说可能非常棘手 可以轻松组合操作（等待另一个事件/获取、链事件） 可能会停止正在运行的任务

根据个人经验，在一个项目（更大的代码库）中，我们从 redux-thunk 开始，但后来我们需要集成更高级的功能，例如油门，以及动作之间的一些依赖关系。所以我们将所有内容都改写为redux-saga，这对我们来说效果很好。

【讨论】：

根据 Redux 文档，reducers 必须是纯的...Action 是普通对象 type: 'someType', payload: 'someData'，不是吗？

【参考方案2】：

您在这里有点复制 redux-thunk。一个纯粹的 redux 动作创建者应该返回一个动作对象以被调度，而不是调度一个动作本身（参见redux doc on action creator）。

为了更好地理解为什么您的技术是 redux-thunk 的复制品，请查看作者的 this post