使用 Redux-Saga 代替在 React 组件中编写异步函数有什么好处？

Question

反应版本是16.13.1。

我想知道使用 redux-saga 进行异步方法是否有一些好处。

const component = () => { 
  const asyncFunc = async() => {  // <- this part should be moved out to redux-saga?
    await callMethod();
  }

  return (
    <div onClick={asyncFunc}>button</div>
  )
}

我不知道asyncFunc应该在 redux-saga 或 React 组件中调用它。

哪个更好或更有利？

在我看来，我更喜欢在组件中调用异步方法。

Answer 1

简而言之，redux-saga当我们需要在 redux 操作期间实现一些异步操作时，这是有益的。

现在您正在做的是处理组件中的副作用，因此您将分派的操作只会更新存储。

这是一个非常简单的用例，您在组件中处理它，考虑一个场景，您需要从 2 个不同的组件获得相同的功能。您将必须在 2 个不同的组件中复制逻辑。

测试将变得困难。

现在再次考虑相同的场景，但问题是因为您可以触发来自 2 个组件的 API 调用，让我们考虑用户同时触发来自两个组件的 API 调用的场景，处理这两个 API 调用会浪费资源，如果第一个 API 调用仍待处理。

对于所有这种情况，redux-saga 提供了类似的方法takeLatest，takeEvery等等。