Redux-Saga vs Redux-Thunk

Redux-Saga与Redux-Thunk对比

⭐ 核心区别对比表

特性	Redux-Thunk	Redux-Saga
实现原理	函数返回函数	生成器函数
复杂度	简单直接	较为复杂
功能强大度	基础功能	丰富功能
副作用处理	命令式	声明式
测试难度	较难(需mock)	较易(纯函数)
学习曲线	平缓	陡峭
适用场景	简单异步逻辑	复杂异步流程

🌟 实现原理详解

Redux-Thunk

// Redux-Thunk核心实现(仅10行左右)
function createThunkMiddleware(extraArgument) {
   
   
  return ({
    
     dispatch, getState }) => next => action => {
   
   
    if (typeof action === 'function') {
   
   
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}

// 使用Redux-Thunk的异步Action
const fetchUser = (userId) => {
   
   
  // 返回一个函数而非普通action对象
  return async (dispatch, getState) => {
   
   
    dispatch({
   
    type: 'FETCH_USER_START' });
    
    try {
   
   
      const response = await fetch(`/api/users/${
     
     userId}