Redux Thunk和Redux Saga有什么区别？

Question

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

Answer 1

其实两者都是< code>Redux处理异步动作的中间件。为了了解两者之间的区别，请注意下面的图片:

中间件框通常是指将现有软件中的单独功能粘合在一起的软件服务。对于Redux，中间件提供了一个第三方扩展点，用于发送操作和将操作交给reducer。然后减速器产生新的状态。

Redux-Thunk是一个中间件，允许您调用返回函数而不是操作对象的操作创建者。该函数接收存储的分派方法，一旦异步操作完成，该方法将用于分派函数体内的常规同步操作。352B容量，简单易学，易于使用

Redux Saga利用了一个名为Generators的ES6功能，允许我们编写看起来同步且非常易于测试的异步代码。在saga中，我们可以轻松测试我们的异步流，我们的操作保持纯粹。复杂，难以学习和理解，14kB体积，但很容易组织复杂的异步操作，使其非常易读，saga有许多有用的工具来处理异步操作

提示：如果您无法理解它们之间的区别或理解redux传奇流程，但仍希望有可读的代码并避免回调地狱，请使用async/awaitredux-thunk

// 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 2

Redux Thunk和Redux Saga都会处理副作用。简单地说，应用于最常见的场景（异步函数，特别是AJAX调用），Thunk允许Promises处理它们，Saga使用Generator。Thunk简单易用，Promises对许多开发人员都很熟悉，Saga/Generators更强大，但您需要学习它们。当Promises足够好时，Thunk也足够好，当您定期处理更复杂的案例时，Saga会为您提供更好的工具。

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

实际上，选择其中一个确实取决于（同义反复）项目。

需要记住的一点是，这两个中间件可以共存，所以您可以从Thunks开始，在需要的时候引入Sagas(然后根据实际经验选择如何重构/重构什么...特别适合“学习项目”、MVP等的解决方案)一般来说，Sagas更强大，也更容易测试，但它们引入了许多新概念，如果您还在学习其他技术(特别是Redux)，这可能会有点令人不知所措。

具体来说，在处理简单有效的Redux哲学(actions(literal object)馈入reducer(pure functions))的同时，可以用更有限但容易掌握的Thunk(< code > promise . then())来处理副作用。error())，或者使用Saga，这需要您面对(强大的)概念，即您可以使用这些操作做更复杂的事情。

还值得一提的是（redux-）可观察的有一个更复杂（甚至更强大）的范式来处理副作用，以防你不熟悉它（如果你已经熟悉了，它可能比学习佐贺更容易使用）。