咨询Redux异步Action通用模式：简化重复逻辑方案

当然有！这正是Redux异步流标准化要解决的痛点 #

你遇到的这种重复编写LOAD_XX_REQUEST/SUCCESS/FAILURE的问题，本质是异步Action样板代码冗余，我们可以通过两种核心方案实现通用化：手动封装工厂函数（适合原生Redux），或者用Redux官方推荐的Redux Toolkit（RTK）来实现「一次封装，多处复用」，不用每次都写一模一样的请求、成功、失败逻辑。

方案1：手动封装异步Action工厂函数（原生Redux适用） #

我们可以写两个核心工具函数：一个生成标准化的Action类型，另一个生成对应的异步Action Creator，只需传入资源名和请求端点即可。

1.1 生成Action类型的工具函数

// 传入资源名（比如'TODOS'），返回三个标准化Action类型
const createAsyncActionTypes = (resource) => ({
  REQUEST: `LOAD_${resource}_REQUEST`,
  SUCCESS: `LOAD_${resource}_SUCCESS`,
  FAILURE: `LOAD_${resource}_FAILURE`,
});

1.2 生成异步Action Creator的工厂函数

这个函数会自动处理请求的三个阶段（发起、成功、失败），并dispatch对应的Action：

const createAsyncLoader = (resource, endpoint) => {
  const actionTypes = createAsyncActionTypes(resource);
  
  return () => async (dispatch) => {
    // 发起请求时dispatch REQUEST Action
    dispatch({ type: actionTypes.REQUEST });
    try {
      const response = await fetch(endpoint);
      const data = await response.json();
      // 请求成功dispatch SUCCESS Action，携带数据
      dispatch({ type: actionTypes.SUCCESS, payload: data });
    } catch (error) {
      // 请求失败dispatch FAILURE Action，携带错误信息
      dispatch({ type: actionTypes.FAILURE, payload: error.message });
    }
  };
};

1.3 使用方式（一键生成异步Action）

// 生成Todos的加载Action
export const loadTodos = createAsyncLoader('TODOS', '/api/todos');
// 生成Users的加载Action
export const loadUsers = createAsyncLoader('USERS', '/api/users');

1.4 通用Reducer处理

同样可以封装通用的异步状态Reducer，避免重复写switch case：

const createAsyncReducer = (initialState, actionTypes) => {
  return (state = initialState, action) => {
    switch (action.type) {
      case actionTypes.REQUEST:
        return { ...state, loading: true, error: null };
      case actionTypes.SUCCESS:
        return { ...state, loading: false, data: action.payload };
      case actionTypes.FAILURE:
        return { ...state, loading: false, error: action.payload };
      default:
        return state;
    }
  };
};

// 生成Todos的Reducer
const todosActionTypes = createAsyncActionTypes('TODOS');
export const todosReducer = createAsyncReducer(
  { loading: false, data: [], error: null },
  todosActionTypes
);

方案2：用Redux Toolkit的createAsyncThunk（官方推荐） #

Redux Toolkit（RTK）是Redux官方推出的工具集，内置了异步流的标准化处理，完全不需要自己写样板代码。它会自动生成pending/fulfilled/rejected三种Action类型，对应你说的REQUEST/SUCCESS/FAILURE。

2.1 生成异步Thunk

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

// 先封装通用的请求函数（可选，也可以直接写在Thunk里）
const fetchResource = async (endpoint) => {
  const response = await fetch(endpoint);
  if (!response.ok) throw new Error('请求失败');
  return response.json();
};

// 生成Todos的异步Thunk，自动生成`todos/loadTodos/pending`等类型
export const loadTodos = createAsyncThunk(
  'todos/loadTodos', // Action前缀，用于生成唯一类型
  async () => fetchResource('/api/todos')
);

// 生成Users的异步Thunk
export const loadUsers = createAsyncThunk(
  'users/loadUsers',
  async () => fetchResource('/api/users')
);

2.2 用createSlice处理异步状态

RTK的createSlice可以通过extraReducers直接捕获Thunk生成的三种状态，还支持Immer自动处理不可变更新：

const todosSlice = createSlice({
  name: 'todos',
  initialState: { loading: false, data: [], error: null },
  extraReducers: (builder) => {
    builder
      .addCase(loadTodos.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(loadTodos.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(loadTodos.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

export const todosReducer = todosSlice.reducer;

2.3 进一步封装Reducer逻辑（可选）

如果多个Reducer的异步状态处理逻辑完全一致，可以再封装一个工具函数：

const addAsyncCases = (builder, thunk, customHandlers = {}) => {
  builder
    .addCase(thunk.pending, (state) => {
      state.loading = true;
      state.error = null;
      customHandlers.pending?.(state);
    })
    .addCase(thunk.fulfilled, (state, action) => {
      state.loading = false;
      state.data = action.payload;
      customHandlers.fulfilled?.(state, action);
    })
    .addCase(thunk.rejected, (state, action) => {
      state.loading = false;
      state.error = action.error.message;
      customHandlers.rejected?.(state, action);
    });
};

// 使用时只需一行代码
const todosSlice = createSlice({
  name: 'todos',
  initialState: { loading: false, data: [], error: null },
  extraReducers: (builder) => {
    addAsyncCases(builder, loadTodos);
    // 如果需要自定义处理，比如过滤数据
    // addAsyncCases(builder, loadTodos, {
    //   fulfilled: (state, action) => {
    //     state.data = action.payload.filter(todo => !todo.completed);
    //   }
    // });
  },
});

总结 #

• 如果是原生Redux项目，用手动工厂函数可以快速消除样板代码；
• 如果是新项目或可以迁移到RTK，强烈推荐createAsyncThunk+createSlice的组合，这是Redux官方现在主推的异步流方案，代码更简洁，还内置了很多优化（比如自动处理Action类型、Immer不可变更新、DevTools支持等）。

内容的提问来源于stack exchange，提问作者atmosfer