为什么使用 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
    })
  })
}

我试过了并且成功了 (complete code)。所以我想一定有一些我不知道的不便之处。

Answer 1

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

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

Answer 2

您的代码与 thunk 的代码类似。

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

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

但是为什么呢？

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

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

操作是可预测的，它们只是 return 有效载荷，如

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

然后你构建中间件，它将对执行请求所需的所有数据采取行动 API

可能的优势：

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

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

为什么使用 redux-thunk 或 redux-saga 进行抓取？

Why use redux-thunk or redux-saga for fetches?

reactjs

redux

react-redux

redux-thunk

redux-saga