Redux 实践与中间件应用

Redux 异步处理的挑战

Redux 核心设计是同步的、单向数据流，但现代应用中异步操作无处不在。Redux 中间件填补了这一缺口，专门解决异步流程管理、副作用隔离等复杂场景。

中间件架构原理

中间件位于 action 被发起之后、到达 reducer 之前，提供了拦截和处理 action 的机会。

// 中间件基本结构
const middleware = store => next => action => {
  // 前置处理
  console.log('dispatching', action);
  
  // 调用下一个中间件或reducer
  let result = next(action);
  
  // 后置处理
  console.log('next state', store.getState());
  
  return result;
}

Redux-Thunk: 函数式异步处理

核心原理

Redux-Thunk 允许 action creator 返回函数而非普通对象，函数接收 dispatch 和 getState 参数。

// redux-thunk 核心实现（仅20行代码）
function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

实战应用示例

// 用户列表加载功能完整实现
import { createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

// Slice定义
const userSlice = createSlice({
  name: 'users',
  initialState: {
    data: [],
    loading: false,
    error: null
  },
  reducers: {
    fetchStart: (state) => {
      state.loading = true;
      state.error = null;
    },
    fetchSuccess: (state, action) => {
      state.data = action.payload;
      state.loading = false;
    },
    fetchFailure: (state, action) => {
      state.loading = false;
      state.error = action.payload;
    }
  }
});

// 导出actions
export const { fetchStart, fetchSuccess, fetchFailure } = userSlice.actions;

// Thunk action creator
export const fetchUsers = () => async (dispatch, getState) => {
  try {
    dispatch(fetchStart());
    
    // 可以访问当前state
    const { users } = getState();
    if (users.data.length > 0 && !users.loading) {
      return; // 避免重复加载
    }
    
    const response = await axios.get('https://api.example.com/users');
    
    dispatch(fetchSuccess(response.data));
  } catch (error) {
    dispatch(fetchFailure(error.message));
  }
};

// 带参数的thunk
export const fetchUserById = (userId) => async (dispatch) => {
  try {
    dispatch(fetchStart());
    const response = await axios.get(`https://api.example.com/users/${userId}`);
    dispatch(fetchSuccess([response.data]));
  } catch (error) {
    dispatch(fetchFailure(error.message));
  }
};

export default userSlice.reducer;

React组件集成

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUsers } from './userSlice';

const UserList = () => {
  const dispatch = useDispatch();
  const { data, loading, error } = useSelector((state) => state.users);

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h2>用户列表</h2>
      <ul>
        {data.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

Redux-Saga: 声明式异步处理

核心原理

Redux-Saga 使用生成器函数管理副作用，提供丰富的组合操作符，适合复杂异步流程。
Ran tool

实战应用示例

// users模块完整实现
import { createSlice } from '@reduxjs/toolkit';
import { call, put, takeLatest, select } from 'redux-saga/effects';
import axios from 'axios';

// Slice定义
const userSlice = createSlice({
  name: 'users',
  initialState: {
    data: [],
    loading: false,
    error: null
  },
  reducers: {
    fetchUsersRequest: (state) => {
      state.loading = true;
      state.error = null;
    },
    fetchUsersSuccess: (state, action) => {
      state.data = action.payload;
      state.loading = false;
    },
    fetchUsersFailure: (state, action) => {
      state.loading = false;
      state.error = action.payload;
    }
  }
});

export const { 
  fetchUsersRequest, 
  fetchUsersSuccess, 
  fetchUsersFailure 
} = userSlice.actions;

// Saga函数
export function* fetchUsersSaga() {
  try {
    // 可以通过select Effect获取Redux状态
    const { users } = yield select();
    if (users.data.length > 0 && !users.loading) {
      return; // 避免重复加载
    }
    
    // call Effect执行异步调用
    const response = yield call(axios.get, 'https://api.example.com/users');
    
    // put Effect分发新action
    yield put(fetchUsersSuccess(response.data));
  } catch (error) {
    yield put(fetchUsersFailure(error.message));
  }
}

// 带参数的Saga
export function* fetchUserByIdSaga(action) {
  try {
    const { userId } = action.payload;
    const response = yield call(axios.get, `https://api.example.com/users/${userId}`);
    yield put(fetchUsersSuccess([response.data]));
  } catch (error) {
    yield put(fetchUsersFailure(error.message));
  }
}

// Root Saga
export function* usersSaga() {
  // 监听对应action类型，触发saga处理函数
  yield takeLatest('users/fetchUsersRequest', fetchUsersSaga);
  yield takeLatest('users/fetchUserById', fetchUserByIdSaga);
}

export default userSlice.reducer;

复杂流程处理

import { call, put, takeLatest, all, race, delay } from 'redux-saga/effects';

// 并发请求
function* fetchDashboardData() {
  try {
    yield put(dashboardLoadingStart());
    
    // 并行执行多个请求
    const [users, posts, comments] = yield all([
      call(axios.get, '/api/users'),
      call(axios.get, '/api/posts'),
      call(axios.get, '/api/comments')
    ]);
    
    yield put(dashboardLoadSuccess({ users: users.data, posts: posts.data, comments: comments.data }));
  } catch (error) {
    yield put(dashboardLoadFailure(error.message));
  }
}

// 请求竞态处理（请求超时处理）
function* fetchUserWithTimeout(action) {
  try {
    const { userId } = action.payload;
    
    // 竞争条件：请求成功 vs 超时
    const { response, timeout } = yield race({
      response: call(axios.get, `https://api.example.com/users/${userId}`),
      timeout: delay(5000) // 5秒超时
    });
    
    if (response) {
      yield put(fetchUserSuccess(response.data));
    } else if (timeout) {
      yield put(fetchUserFailure('请求超时'));
    }
  } catch (error) {
    yield put(fetchUserFailure(error.message));
  }
}

Redux-Observable: 响应式异步处理

核心原理

Redux-Observable 基于 RxJS，以 Epic 形式处理 action 流，擅长复杂事件流处理和响应式编程。

// Epic基本结构
const pingEpic = (action$, state$) => 
  action$.pipe(
    ofType('PING'),
    delay(1000),
    map(() => ({ type: 'PONG' }))
  );

实战应用示例

// 用户模块完整实现
import { createSlice } from '@reduxjs/toolkit';
import { ofType } from 'redux-observable';
import { ajax } from 'rxjs/ajax';
import { mergeMap, map, catchError, filter, withLatestFrom } from 'rxjs/operators';
import { of } from 'rxjs';

// Slice定义
const userSlice = createSlice({
  name: 'users',
  initialState: {
    data: [],
    loading: false,
    error: null
  },
  reducers: {
    fetchUsersRequest: (state) => {
      state.loading = true;
      state.error = null;
    },
    fetchUsersSuccess: (state, action) => {
      state.data = action.payload;
      state.loading = false;
    },
    fetchUsersFailure: (state, action) => {
      state.loading = false;
      state.error = action.payload;
    },
    fetchUserById: (state, action) => {
      state.loading = true;
      state.error = null;
    }
  }
});

export const { 
  fetchUsersRequest, 
  fetchUsersSuccess, 
  fetchUsersFailure,
  fetchUserById
} = userSlice.actions;

// Epic定义
export const fetchUsersEpic = (action$, state$) => 
  action$.pipe(
    ofType('users/fetchUsersRequest'),
    withLatestFrom(state$),
    filter(([action, state]) => {
      // 避免重复加载
      return state.users.data.length === 0 || state.users.loading === false;
    }),
    mergeMap(() => 
      ajax.getJSON('https://api.example.com/users').pipe(
        map(response => fetchUsersSuccess(response)),
        catchError(error => of(fetchUsersFailure(error.message)))
      )
    )
  );

export const fetchUserByIdEpic = (action$) => 
  action$.pipe(
    ofType('users/fetchUserById'),
    mergeMap(action => 
      ajax.getJSON(`https://api.example.com/users/${action.payload}`).pipe(
        map(response => fetchUsersSuccess([response])),
        catchError(error => of(fetchUsersFailure(error.message)))
      )
    )
  );

export default userSlice.reducer;

复杂操作符应用

import { combineEpics } from 'redux-observable';
import { interval, of, EMPTY } from 'rxjs';
import { 
  switchMap, debounceTime, distinctUntilChanged, 
  takeUntil, retry, timeout
} from 'rxjs/operators';

// 自动补全搜索Epic
const autocompleteEpic = (action$) => action$.pipe(
  ofType('SEARCH_INPUT_CHANGE'),
  debounceTime(300), // 防抖
  distinctUntilChanged(), // 防止重复请求相同搜索词
  switchMap(action => {
    // switchMap取消前一次未完成的请求
    const searchTerm = action.payload;
    return ajax.getJSON(`https://api.example.com/search?q=${searchTerm}`).pipe(
      map(results => ({ type: 'SEARCH_RESULTS', payload: results })),
      takeUntil(action$.pipe(ofType('CANCEL_SEARCH'))),
      timeout(5000),
      retry(2),
      catchError(err => of({ type: 'SEARCH_ERROR', payload: err.message }))
    );
  })
);

// 长轮询Epic
const pollingEpic = (action$) => action$.pipe(
  ofType('START_POLLING'),
  switchMap(action => {
    return interval(10000).pipe(
      switchMap(() => 
        ajax.getJSON('https://api.example.com/updates').pipe(
          map(data => ({ type: 'RECEIVE_UPDATES', payload: data })),
          catchError(err => of({ type: 'POLLING_ERROR', payload: err.message }))
        )
      ),
      takeUntil(action$.pipe(ofType('STOP_POLLING')))
    );
  })
);

中间件方案对比分析

特性	Redux-Thunk	Redux-Saga	Redux-Observable
学习曲线	低，函数式编程	中高，Generator语法	高，需RxJS基础
代码复杂度	低（简单场景）高（复杂场景）	中等	初始高，后期可降低
测试难度	中等，需模拟异步	低，纯函数易测试	中等，需RxJS测试工具
异步流程控制	基础，手动控制	丰富，声明式	极其强大，响应式流
取消操作	困难，需手动实现	简单，内置支持	简单，内置支持
竞态处理	困难，需手动实现	简单，内置race	简单，多种操作符
并发控制	需手动实现	内置all/fork	内置多种操作符
调试便利性	一般	优秀，支持时间旅行	一般，需RxJS工具
适用场景	简单异步操作	复杂业务流程	事件流处理、响应式UI

中间件选型决策指南

项目规模考量

小型项目: Redux-Thunk 足够应付，学习成本最低
中型项目: Redux-Saga 平衡了复杂性和功能性
大型项目: Redux-Observable 提供长期可扩展性，尤其处理事件流、实时应用

团队因素

团队熟悉度：已有RxJS经验优先考虑Redux-Observable
学习资源：Redux-Saga社区资源更丰富
新手友好度：Redux-Thunk > Redux-Saga > Redux-Observable

业务复杂度

简单CRUD：Redux-Thunk
多步骤流程、状态机：Redux-Saga
复杂事件流、高响应UI：Redux-Observable

中间件整合

Redux Toolkit整合

import { configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import { createEpicMiddleware, combineEpics } from 'redux-observable';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
import { rootSaga } from './sagas';
import { rootEpic } from './epics';

// 创建中间件实例
const sagaMiddleware = createSagaMiddleware();
const epicMiddleware = createEpicMiddleware();

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => 
    getDefaultMiddleware()
      .prepend(thunk)  // 简单异步处理
      .concat(sagaMiddleware)  // 复杂业务逻辑
      .concat(epicMiddleware)  // 特殊事件流处理
});

// 运行根saga和根epic
sagaMiddleware.run(rootSaga);
epicMiddleware.run(rootEpic);

export default store;

模块化组织

src/
├── features/
│   ├── users/
│   │   ├── usersSlice.js    # 定义state和reducers
│   │   ├── usersThunks.js   # 简单异步操作
│   │   ├── usersSagas.js    # 复杂业务流程
│   │   └── usersEpics.js    # 响应式事件流
│   └── ...
├── store/
│   ├── rootReducer.js       # 组合所有reducers  
│   ├── rootSaga.js          # 组合所有sagas
│   ├── rootEpic.js          # 组合所有epics
│   └── index.js             # store配置

案例：购物车

需求场景

实现购物车功能，包括添加商品、调整数量、获取实时库存和优惠信息、下单流程。

混合中间件实现

// cartSlice.js
import { createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    items: [],
    loading: false,
    error: null,
    checkoutStatus: 'idle' // 'idle' | 'processing' | 'success' | 'failed'
  },
  reducers: {
    // 基础state变更
    addToCart: (state, action) => {
      const { product, quantity = 1 } = action.payload;
      const existingItem = state.items.find(item => item.id === product.id);
      
      if (existingItem) {
        existingItem.quantity += quantity;
      } else {
        state.items.push({...product, quantity});
      }
    },
    
    updateQuantity: (state, action) => {
      const { productId, quantity } = action.payload;
      const item = state.items.find(item => item.id === productId);
      if (item) {
        item.quantity = quantity;
      }
    },
    
    removeFromCart: (state, action) => {
      const productId = action.payload;
      state.items = state.items.filter(item => item.id !== productId);
    },
    
    // 异步action状态管理
    checkoutStart: (state) => {
      state.checkoutStatus = 'processing';
      state.error = null;
    },
    
    checkoutSuccess: (state) => {
      state.checkoutStatus = 'success';
      state.items = [];
    },
    
    checkoutFailure: (state, action) => {
      state.checkoutStatus = 'failed';
      state.error = action.payload;
    },
    
    // 库存检查
    inventoryCheckStart: (state) => {
      state.loading = true;
    },
    
    inventoryCheckSuccess: (state, action) => {
      state.loading = false;
      // 更新商品库存信息
      action.payload.forEach(stockInfo => {
        const item = state.items.find(item => item.id === stockInfo.productId);
        if (item) {
          item.inStock = stockInfo.inStock;
          item.maxAvailable = stockInfo.quantity;
        }
      });
    },
    
    inventoryCheckFailure: (state, action) => {
      state.loading = false;
      state.error = action.payload;
    }
  }
});

export const {
  addToCart,
  updateQuantity,
  removeFromCart,
  checkoutStart,
  checkoutSuccess,
  checkoutFailure,
  inventoryCheckStart,
  inventoryCheckSuccess,
  inventoryCheckFailure
} = cartSlice.actions;

export default cartSlice.reducer;

使用Thunk处理简单操作

// cartThunks.js
import axios from 'axios';
import {
  inventoryCheckStart,
  inventoryCheckSuccess,
  inventoryCheckFailure
} from './cartSlice';

// 简单库存检查 - Thunk适合
export const checkInventory = () => async (dispatch, getState) => {
  const { cart } = getState();
  if (cart.items.length === 0) return;
  
  try {
    dispatch(inventoryCheckStart());
    
    // 获取购物车内所有商品ID
    const productIds = cart.items.map(item => item.id);
    
    // 检查库存
    const response = await axios.post('/api/inventory/check', { productIds });
    
    dispatch(inventoryCheckSuccess(response.data));
  } catch (error) {
    dispatch(inventoryCheckFailure(error.message));
  }
};

使用Saga处理复杂结账流程

// cartSagas.js
import { takeLatest, put, call, select, all } from 'redux-saga/effects';
import axios from 'axios';
import {
  checkoutStart,
  checkoutSuccess,
  checkoutFailure
} from './cartSlice';

// 复杂结账流程 - Saga适合多步骤流程
function* checkoutSaga() {
  try {
    // 1. 获取当前购物车
    const { cart } = yield select();
    if (cart.items.length === 0) {
      yield put(checkoutFailure('购物车为空'));
      return;
    }
    
    // 2. 最终库存确认
    const inventoryResponse = yield call(axios.post, '/api/inventory/check', {
      productIds: cart.items.map(item => item.id)
    });
    
    // 3. 检查库存不足情况
    const outOfStockItems = [];
    inventoryResponse.data.forEach(stockInfo => {
      const cartItem = cart.items.find(item => item.id === stockInfo.productId);
      if (cartItem && cartItem.quantity > stockInfo.quantity) {
        outOfStockItems.push({
          ...cartItem,
          availableQuantity: stockInfo.quantity
        });
      }
    });
    
    if (outOfStockItems.length > 0) {
      yield put(checkoutFailure({
        message: '部分商品库存不足',
        outOfStockItems
      }));
      return;
    }
    
    // 4. 创建订单
    const orderData = {
      items: cart.items,
      totalAmount: cart.items.reduce((total, item) => total + item.price * item.quantity, 0)
    };
    
    const orderResponse = yield call(axios.post, '/api/orders', orderData);
    
    // 5. 处理支付
    const paymentResponse = yield call(axios.post, '/api/payments', {
      orderId: orderResponse.data.id,
      amount: orderData.totalAmount
    });
    
    // 6. 完成结账
    yield put(checkoutSuccess());
    
    // 7. 可选：发送确认邮件等后续操作
    yield call(axios.post, '/api/notifications/order-confirmation', {
      orderId: orderResponse.data.id
    });
    
  } catch (error) {
    yield put(checkoutFailure(error.message));
  }
}

export function* cartSagas() {
  yield all([
    takeLatest('cart/checkoutStart', checkoutSaga)
  ]);
}

使用Observable处理实时价格

// cartEpics.js
import { ofType } from 'redux-observable';
import { ajax } from 'rxjs/ajax';
import { 
  mergeMap, map, catchError, switchMap, 
  debounceTime, takeUntil, withLatestFrom
} from 'rxjs/operators';
import { of, timer } from 'rxjs';

// 处理实时价格更新 - Observable适合事件流
export const priceUpdateEpic = (action$, state$) => action$.pipe(
  ofType('cart/addToCart', 'cart/updateQuantity', 'cart/removeFromCart'),
  debounceTime(500), // 防抖，避免频繁请求
  withLatestFrom(state$),
  switchMap(([action, state]) => {
    const { cart } = state;
    
    // 如果购物车为空，不请求
    if (cart.items.length === 0) {
      return of({ type: 'cart/priceUpdateSkipped' });
    }
    
    // 准备请求数据
    const requestData = {
      items: cart.items.map(item => ({
        productId: item.id,
        quantity: item.quantity
      }))
    };
    
    // 发起价格计算请求
    return ajax.post('/api/cart/calculate', requestData).pipe(
      map(response => ({
        type: 'cart/priceUpdateSuccess',
        payload: response.response
      })),
      takeUntil(action$.pipe(ofType('cart/addToCart', 'cart/updateQuantity', 'cart/removeFromCart'))),
      catchError(error => of({
        type: 'cart/priceUpdateFailure',
        payload: error.message
      }))
    );
  })
);

// 实时库存轮询 - Observable适合循环事件
export const inventoryPollingEpic = (action$, state$) => action$.pipe(
  ofType('INVENTORY_POLLING_START'),
  switchMap(() => {
    // 每30秒查询一次库存
    return timer(0, 30000).pipe(
      withLatestFrom(state$),
      mergeMap(([_, state]) => {
        const { cart } = state;
        
        if (cart.items.length === 0) {
          return of({ type: 'INVENTORY_POLLING_SKIP' });
        }
        
        const productIds = cart.items.map(item => item.id);
        
        return ajax.post('/api/inventory/check', { productIds }).pipe(
          map(response => ({
            type: 'cart/inventoryCheckSuccess',
            payload: response.response
          })),
          catchError(error => of({
            type: 'cart/inventoryCheckFailure',
            payload: error.message
          }))
        );
      }),
      takeUntil(action$.pipe(ofType('INVENTORY_POLLING_STOP')))
    );
  })
);

总结与思考

混合策略：根据需求复杂度选择合适的中间件
- 简单异步操作：Redux-Thunk
- 复杂业务流程：Redux-Saga
- 事件流处理：Redux-Observable
测试优先：中间件测试方法各不相同
- Thunk：模拟store和API调用
- Saga：单独测试每个generator函数
- Observable：使用RxJS专用测试工具如TestScheduler
状态设计：保持状态扁平化，规范异步状态表示
- 包含loading/error/data三要素
- 使用请求状态枚举（idle/loading/success/failed）
- 规范化复杂数据结构
代码组织：按功能模块化
- 每个模块包含reducer、action、不同中间件实现
- 按业务领域而非技术层次拆分文件
- 使用barrel文件导出公共API
性能保障：
- 避免冗余请求：使用缓存状态和条件判断
- 处理竞态条件：取消过时操作
- 调试体验：使用Redux DevTools监控action和状态变化