当前位置：首页 > web >正文

Redux-Saga vs Redux-Thunk

web 2025/5/6 7:33:34

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}`);const user = await response.json();dispatch({ type: 'FETCH_USER_SUCCESS', payload: user });} catch (error) {dispatch({ type: 'FETCH_USER_FAILURE', error });}};
};// 使用
dispatch(fetchUser(123));

Redux-Saga

// Redux-Saga使用生成器函数
import { call, put, takeEvery } from 'redux-saga/effects';// 定义Saga工作函数
function* fetchUser(action) {try {// call效果 - 调用API但不阻塞const user = yield call(api.fetchUser, action.payload.userId);// put效果 - 分发actionyield put({ type: 'FETCH_USER_SUCCESS', payload: user });} catch (error) {yield put({ type: 'FETCH_USER_FAILURE', error });}
}// 监听Saga - 监听特定action并执行工作
function* watchFetchUser() {// 监听每一个'FETCH_USER_REQUEST'类型的actionyield takeEvery('FETCH_USER_REQUEST', fetchUser);
}// 根Saga
export default function* rootSaga() {yield all([watchFetchUser(),// 其他saga...]);
}

🔄 工作流程对比

💡 核心概念对比

Redux-Thunk的核心概念

函数式action: 普通action是对象，thunk action是函数
访问dispatch和getState: thunk函数接收这两个参数
直接执行副作用: 在thunk函数内直接执行异步操作

Redux-Saga的核心概念

生成器函数: 使用function*和yield语法
Effects: 描述副作用的普通JavaScript对象
- call: 调用异步函数
- put: 分发action
- take: 等待特定action被分发
- fork: 非阻塞调用
- cancel: 取消fork任务
- select: 获取state的部分数据
任务编排: 提供复杂异步控制流组合

📊 功能对比示例

基本API调用

Redux-Thunk:

const fetchProducts = () => async dispatch => {dispatch({ type: 'FETCH_PRODUCTS_START' });try {const response = await axios.get('/api/products');dispatch({ type: 'FETCH_PRODUCTS_SUCCESS', payload: response.data });} catch (error) {dispatch({ type: 'FETCH_PRODUCTS_FAILURE', error });}
};

Redux-Saga:

function* fetchProducts() {yield put({ type: 'FETCH_PRODUCTS_START' });try {const products = yield call(axios.get, '/api/products');yield put({ type: 'FETCH_PRODUCTS_SUCCESS', payload: products.data });} catch (error) {yield put({ type: 'FETCH_PRODUCTS_FAILURE', error });}
}

复杂场景：请求竞态处理

Redux-Thunk (较复杂实现):

let lastRequestId = 0;const fetchUser = (userId) => async dispatch => {const requestId = ++lastRequestId;dispatch({ type: 'FETCH_USER_START', payload: { userId } });try {const response = await fetch(`/api/users/${userId}`);const data = await response.json();// 检查这是否是最新请求if (requestId === lastRequestId) {dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });}} catch (error) {if (requestId === lastRequestId) {dispatch({ type: 'FETCH_USER_FAILURE', error });}}
};

Redux-Saga (优雅处理):

function* fetchUser(action) {const { userId } = action.payload;// takeLatest会自动取消之前未完成的相同任务yield put({ type: 'FETCH_USER_START', payload: { userId } });try {const user = yield call(api.fetchUser, userId);yield put({ type: 'FETCH_USER_SUCCESS', payload: user });} catch (error) {yield put({ type: 'FETCH_USER_FAILURE', error });}
}function* watchFetchUser() {// 只执行最后一次请求yield takeLatest('FETCH_USER_REQUEST', fetchUser);
}