Question

Redux Thunk和Redux Saga都是Redux的中间件。两者之间有什么区别以及如何确定何时使用Redux Thunk或Redux Saga？

Answer 1

Redux Thunk和Redux Saga都负责处理副作用。简单来说，应用于最常见的场景（异步函数，特别是AJAX调用），Thunk允许Promises＆＃34;为了对付他们，佐贺使用发电机。 Thunk易于使用，许多开发人员都熟悉Promise，Saga / Generators更强大，但您需要学习它们。当Promise足够好时，Thunk也是如此，当你定期处理更复杂的案例时，Saga会为你提供更好的工具。

举个例子，当您在路径/视图中启动AJAX调用然后用户移动到另一个时，会发生什么？你能安全地让减速器改变状态吗？ Saga让取消效果变得微不足道，Thunk要求你照顾它，解决方案不能很好地扩展。

实际上，选择一个或另一个实际上取决于（重复）项目。

要记住的一件事是两个中间件可以共存，所以你可以从Thunks开始并在需要时引入Sagas（然后选择如何/通过实践重构的内容...一个解决方案这特别适合＆＃34;学习项目＆＃34;，MVP，et similia）总的来说，Sagas更强大，更容易测试，但它们引入了许多新概念，如果您还在学习其他技术（特别是Redux），这可能有点压倒性。

具体来说，在处理简单有效的Redux哲学（动作（文字对象）加入reducers（纯函数））时，你可以处理Thunk的副作用，这些副作用更有限但易于掌握（Promise.then（）.error（）），或者与Saga一起要求你面对（强大的）概念，即你可以用这些动作做更复杂的事情。

同样值得一提的是（redux-）可观察到一种更复杂（甚至更加苛刻）的范式来处理副作用，以防你熟悉它（如果你已经熟悉的话，它可能会比学习Saga更容易使用。

Answer 2

实际上，它们都是Redux用来处理异步操作的中间件。为了了解两者之间的区别，请注意以下图片：

中间件框通常是指将现有软件中的功能粘合在一起的软件服务。对于Redux，中间件在调度动作和将动作交给化简器之间提供了第三方扩展点。然后reducer进入新状态。

Redux Thunk 是一种中间件，可让您调用返回函数而不是动作对象的动作创建者。该函数接收商店的调度方法，一旦异步操作完成，该方法便可以在函数体内调度常规的同步动作。 简单，易于学习和使用352B卷

Redux Saga 利用称为Generators的ES6功能，使我们能够编写看起来是同步的且易于测试的异步代码。在传奇中，我们可以轻松地测试异步流，并且动作保持纯净。 复杂，难以学习和理解的14kB容量，但可以轻松组织复杂的异步动作，从而使其非常易读，并且它具有许多有用的工具来处理异步动作

提示：如果您无法理解它们之间的区别或无法理解redux-saga流程，但仍想拥有可读的代码并避免回调地狱，请通过使用redux-thunk async/await，我举一个要约的例子：

// simple usage of redux-thunk:
export const asyncApiCall = values => {
  return dispatch => {
    return axios.get(url)
      .then(response =>{
        dispatch(successHandle(response));
      })
      .catch(error => {
        dispatch(errorHandle(error));
      });
    };
  };



// async/await usage of redux-thunk:
export const asyncApiCall = values => {
  return async dispatch => {
    try {
      const response = await axios.get(url);
      dispatch(successHandle(response));
    }
    catch(error) {
      dispatch(errorHandle(error));
    }
  };
};

Answer 3

您可以阅读此（https://medium.com/@shoshanarosenfield/redux-thunk-vs-redux-saga-93fe82878b2d）博客以了解有关Redux-thunk和Redux-saga的更多信息。希望对您有帮助！

Redux Thunk和Redux Saga有什么区别？

3 个答案: