Redux Toolkit中asyncThunk内无法调度其他action的问题求助

我是Redux Toolkit新手，正在开发一个包含两个slice的应用：

• uiState：处理应用全局UI状态
• notesState：处理应用的笔记功能状态

以下是两个slice的代码：

// notesSlice.js
import axios from 'axios';
import { showAlert } from "./ui";

const initialState = { entities: [], selectedId: null, selectedEntity: null }

export const getNotes = createAsyncThunk(
    'notes/getNotes',
    async (_, { dispatch }) => {
        dispatch(showAlert())
        const res = await axios.get("http://localhost:8080/api/notes?userId=droy");
        console.log('params', _, dispatch);
       
        return res.data
    }
);

const notesSlice = createSlice({
    name: 'notes',
    initialState: initialState,
    reducers: {},
    extraReducers: {
        [getNotes.fulfilled]: (state, action) => {
            state.entities = action.payload.data
        },
        [getNotes.rejected]: (state) => {
            state.entities = []
        }
    }
});

export default notesSlice.reducer

// uiSlice.js
import { createSlice } from "@reduxjs/toolkit"

const initialState = { showAlert: false, alertMessage: "", showGlobalLoader: false }

const showAlertFn = (state , action) => {
    state.showAlert = true
    state.alertMessage =  action.payload.alertMessage
}

const hideAlertFn = (state) => {
    state.showAlert = false
}

const uiSlice = createSlice({
    name: 'ui',
    initialState: initialState,
    reducers: {
        showAlert :showAlertFn ,
        hideAlert :hideAlertFn
    },
})

console.log(uiSlice)

export const  {showAlert, hideAlert} = uiSlice.actions
export default uiSlice.reducer

我尝试在notes slice的asyncThunk中调度属于uiSlice的showAlert() action，但代码执行到dispatch该行就停滞，后续无反应。查询到的语法就是这样，恳请帮助解决该问题。

核心问题：调用showAlert时缺少必要参数导致报错 #

你的uiSlice中showAlertFn需要读取action.payload.alertMessage，但在getNotes的asyncThunk里调用dispatch(showAlert())时没有传入任何参数，导致action.payload为undefined，访问action.payload.alertMessage会抛出TypeError，直接阻断了后续代码的执行。

具体修复步骤 #

1. 给showAlert传入正确的payload参数
   修改notesSlice中的getNotes函数，调用showAlert时传入包含alertMessage的对象：

export const getNotes = createAsyncThunk(
    'notes/getNotes',
    async (_, { dispatch }) => {
        // 传入alertMessage参数，匹配reducer的要求
        dispatch(showAlert({ alertMessage: "正在加载笔记..." }));
        const res = await axios.get("http://localhost:8080/api/notes?userId=droy");
        console.log('params', _, dispatch);
        return res.data
    }
);

2. 给reducer添加容错处理（可选但推荐）
   为了避免类似参数缺失的问题，在showAlertFn中添加可选链判断，给alertMessage设置默认值：

const showAlertFn = (state , action) => {
    state.showAlert = true
    // 用可选链避免payload不存在时报错
    state.alertMessage = action.payload?.alertMessage || "操作提示";
}

3. 添加请求错误捕获（可选但推荐）
   给asyncThunk的axios请求添加try/catch，防止请求失败时代码停滞，同时更新UI状态提示错误：

export const getNotes = createAsyncThunk(
    'notes/getNotes',
    async (_, { dispatch }) => {
        try {
            dispatch(showAlert({ alertMessage: "正在加载笔记..." }));
            const res = await axios.get("http://localhost:8080/api/notes?userId=droy");
            // 加载成功后隐藏弹窗
            dispatch(hideAlert());
            console.log('params', _, dispatch);
            return res.data
        } catch (error) {
            dispatch(showAlert({ alertMessage: "加载笔记失败，请稍后重试" }));
            throw error; // 抛出错误触发rejected状态
        }
    }
);

4. 检查循环导入（排查潜在问题）
   确认notesSlice和uiSlice之间没有循环导入（比如uiSlice不要导入notesSlice的内容），当前代码中不存在这个问题，但后续开发中需要注意。

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