提问者:小点点

Redux Thunk和Redux Saga有什么区别?


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


共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-)可观察的有一个更复杂(甚至更强大)的范式来处理副作用,以防你不熟悉它(如果你已经熟悉了,它可能比学习佐贺更容易使用)。

匿名用户

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

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

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

Redux Saga利用了一个名为GeneratorsES6功能,允许我们编写看起来同步且非常易于测试的异步代码。在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));
    }
  };
};