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

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

哪个更好或更有益？

我认为我更喜欢在组件中调用异步方法。

Answer 1

使用几乎所有Redux的好处是组织代码并保存所有状态，如果您在一个组件中使用了异步函数，并且偶然地您想在其他组件中再次使用该异步函数，那么您必须一次又一次地编写整个代码，以防redux-saga编写一次异步，并且可以在整个react项目中的任何地方调用该动作，目前您可能正在创建5-10个组件，但可能将来，您将在那时创建5000个组件，从而使redux及其中间件发挥作用。

Answer 2

简单地说，redux-saga在需要在redux动作期间实现一些异步操作的情况下很有用。

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

这是一个非常简单的用例，您在组件中进行了处理，请考虑需要从2个不同组件中获得相同功能的情况。您将不得不在2个不同组件中复制逻辑。

测试将变得困难。

现在再次考虑相同的场景，但是问题是，因为您可以触发来自两个组件的API调用，所以考虑一个场景，用户同时触发了来自两个组件的API调用，这是浪费资源来处理两个API如果第一个API调用仍未完成，则调用。

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

Answer 3

Saga是一种中间件，可在动作到达减速器之前对其进行操作。

基本上，所有副作用都将在中间件中处理，并使您可以更好地控制这些副作用。

这样，很明显关注点分离，中间件将处理副作用，而不是组件。传奇不依赖于组件的生存期。

在一个传奇中，提取将看起来像这样：

function* fetchItems(action) {
  try {
    const result = yield call(axios.post, ...);
    yield put ({ type: 'FETCH_SUCCESS', payload: { result } });
  } catch (e) {
    yield put ({ type: 'FETCH_FAILED', error: { msg: e } });
  }
}

yield takeEvery(FETCH_ITEMS, fetchItems);

但是对于具有后台处理的复杂系统，您可以使用fork()和cancel()来实现不同的模式>

function* doSync() {}

function* main() {
  while ( yield take(START_SYNC) ) {
    const task = yield fork(doSync) // returns a task
    yield take(STOP_SYNC)
    yield cancel(task) // cancel a task if syncing is stopped
  }
}
因此，所有这些都说明，redux-saga的功能在于您的系统变得越来越复杂且由事件驱动时。