Redux Thunk和Redux Saga有什么区别？

Question

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

Answer 1

Redux Thunk和Redux Saga都负责处理副作用.简单来说,适用于最常见的场景(异步功能,特别是AJAX调用)咚允许用"来对付他们,佐贺使用发电机.咚简单易用,并承诺所熟悉的许多开发商,佐贺/发电机更强大,但你需要学习它们.当Promise足够好时,Thunk也是如此,当你定期处理更复杂的案例时,Saga会为你提供更好的工具.

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

实际上,选择一个或另一个实际上取决于(重复)在项目上.

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

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

另外值得一提的(redux-)观察到作为一个更复杂(甚至更多pawerful)模式来处理的副作用,万一你熟悉它(如果你已经是,它可能是更容易比学习佐贺使用).

Answer 2

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

中间件盒通常是指将现有软件中的不同功能粘合在一起的软件服务。对于 Redux，中间件在分派动作和将动作交给减速器之间提供了第三方扩展点。然后 reducer 使新状态。

Redux Thunk是一个中间件，可让您调用返回函数而不是动作对象的动作创建者。该函数接收 store 的 dispatch 方法，然后在异步操作完成后，使用该方法在函数体内分派常规同步操作。简单、易学和使用，352B 容量

Redux 传奇利用了一个ES6名为的特性Generators，允许我们编写看起来同步的异步代码，并且非常容易测试。在传奇中，我们可以轻松地测试我们的异步流并且我们的动作保持纯净。复杂，难以学习和理解，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));
    }
  };
};