为什么要使用 redux-thunk 或 redux-saga 来获取？

Question

我一直读到我应该使用 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
    })
  })
}

我试过了，它奏效了（完整的代码）。所以我想一定有一些我不知道的不便之处。

Answer 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，它对我们来说效果很好。