如何在Redux Toolkit同一切片的Reducer中调用AsyncThunk？

首先明确核心规则：Redux reducer必须是纯函数，绝对不能在reducer里发起异步请求、调用AsyncThunk或者dispatch任何动作——这是Redux的核心设计原则，违反它会导致状态不可预测。

针对你的需求，以下是两种合理的实现方案，既能保持代码内聚，又符合Redux规范：

方案1：单AsyncThunk整合所有逻辑（推荐） #

把「检查本地数组+请求API」的逻辑放在一个AsyncThunk里，代码高度内聚，且完全符合Redux规则。

代码示例 #

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
// 导入你的API服务
import { getServiceRequestById } from './serviceRequestApi';

// 定义AsyncThunk：先查本地，无数据再请求API
export const fetchOrUseLocalServiceRequest = createAsyncThunk(
  'serviceRequests/fetchOrUseLocal',
  async (targetId, { getState }) => {
    // 从Redux状态中获取已有的请求数组
    const { requestList } = getState().serviceRequests;
    // 检查本地是否存在目标请求
    const localRequest = requestList.find(req => req.id === targetId);

    if (localRequest) {
      return localRequest; // 直接返回本地数据，无需请求API
    }

    // 本地无数据，调用API获取
    return await getServiceRequestById(targetId);
  }
);

// 定义切片
const serviceRequestSlice = createSlice({
  name: 'serviceRequests',
  initialState: {
    currentRequest: null, // 单个ServiceRequest对象
    requestList: [], // ServiceRequest数组
    loading: false,
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      // 请求中状态
      .addCase(fetchOrUseLocalServiceRequest.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      // 请求完成（含本地数据返回）
      .addCase(fetchOrUseLocalServiceRequest.fulfilled, (state, action) => {
        state.loading = false;
        // 设置当前请求
        state.currentRequest = action.payload;
        // 若为新请求，加入数组（避免重复）
        const isDuplicate = state.requestList.some(req => req.id === action.payload.id);
        if (!isDuplicate) {
          state.requestList.push(action.payload);
        }
      })
      // 请求失败
      .addCase(fetchOrUseLocalServiceRequest.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  }
});

export default serviceRequestSlice.reducer;

组件中使用 #

只需在组件加载时dispatch这个AsyncThunk即可：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchOrUseLocalServiceRequest } from './serviceRequestSlice';

function RequestDetail({ requestId }) {
  const dispatch = useDispatch();

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

  // 组件渲染逻辑...
}

方案2：组件内处理本地检查（简单场景适用） #

如果不想新增AsyncThunk，也可以在组件中先获取本地状态，再决定执行同步更新还是异步请求：

import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
// 导入原有异步Thunk和同步reducer
import { getServiceRequest } from './serviceRequestSlice';
import { setCurrentRequest } from './serviceRequestSlice';

function RequestDetail({ requestId }) {
  const dispatch = useDispatch();
  const requestList = useSelector(state => state.serviceRequests.requestList);

  useEffect(() => {
    const localRequest = requestList.find(req => req.id === requestId);
    if (localRequest) {
      // 本地存在，直接同步设置当前请求
      dispatch(setCurrentRequest(localRequest));
    } else {
      // 本地不存在，发起API请求
      dispatch(getServiceRequest(requestId));
      // 需在getServiceRequest的fulfilled回调中，同时设置currentRequest并加入数组
    }
  }, [dispatch, requestId, requestList]);

  // 组件渲染逻辑...
}

关于你提到的「直接调用服务」思路 #

这种方式是可行的，但必须放在AsyncThunk中执行（不能放在reducer里）。方案1的实现其实就是这种思路：直接在AsyncThunk里调用API服务，同时处理本地检查，既避免了重复dispatch和解包，又能统一控制是否将新请求加入数组。

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