使用Redux Toolkit更新用户时遇'Uncaught Error'问题求助

错误核心原因 #

1. Action调用错误：在Apicalls.js的catch块中，dispatch(updatenFailure)未调用Action Creator函数，直接传递了函数本身，导致Redux收到的不是普通对象（Plain Object），触发Actions must be plain objects错误。
2. 拼写不一致：AuthSlice.js中定义的Reducer是updateStart/updateSuccess/updateFailure，但导出时写成了rupdateStart/updatenSuccess/updatenFailure，名称不匹配会导致Action无法关联到对应的Reducer。
3. 异步逻辑不规范：手动传递dispatch处理异步请求不符合Redux Toolkit最佳实践，易引发代码混乱与错误。

分步修复方案 #

1. 修正AuthSlice的拼写与状态逻辑 #

统一Action名称，同时修正请求完成后的状态设置：

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

export const authSlice = createSlice({
    name: 'auth',
    initialState: {
        currentUser: null,
        isFetching: false,
        isError: false,
        isSuccess: false,
    },
    reducers: {
        updateStart: (state) => {
            state.isFetching = true;
            state.isError = false;
            state.isSuccess = false; // 重置成功状态
        },
        updateSuccess: (state, action) => {
            state.isFetching = false; // 请求完成后停止加载
            state.isSuccess = true;
            state.currentUser = action.payload;
        },
        updateFailure: (state) => {
            state.isFetching = false;
            state.isError = true;
            state.isSuccess = false; // 重置成功状态
        },
    }
});

// 导出正确拼写的Action Creators
export const { updateStart, updateSuccess, updateFailure } = authSlice.actions;
export default authSlice.reducer;

2. 用Redux Toolkit的createAsyncThunk重构异步请求 #

替代手动传递dispatch的写法，这是Redux官方推荐的异步逻辑处理方式：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import publicRequest from './你的请求实例路径'; // 替换为实际路径

// 定义异步Thunk
export const updateUser = createAsyncThunk(
    'auth/updateUser',
    async ({ id, user }, { rejectWithValue }) => {
        try {
            const res = await publicRequest.put(`/users/${id}`, user);
            return res.data;
        } catch (error) {
            // 传递错误信息供Reducer处理
            return rejectWithValue(error.response?.data || '用户更新失败');
        }
    }
);

// 在Slice中添加extraReducers处理Thunk的三种状态
export const authSlice = createSlice({
    name: 'auth',
    initialState: {
        currentUser: null,
        isFetching: false,
        isError: false,
        isSuccess: false,
        errorMessage: '',
    },
    reducers: {
        // 可选：添加重置更新状态的Action
        resetUpdateState: (state) => {
            state.isSuccess = false;
            state.isError = false;
            state.errorMessage = '';
        }
    },
    extraReducers: (builder) => {
        builder
            .addCase(updateUser.pending, (state) => {
                state.isFetching = true;
                state.isError = false;
                state.isSuccess = false;
                state.errorMessage = '';
            })
            .addCase(updateUser.fulfilled, (state, action) => {
                state.isFetching = false;
                state.isSuccess = true;
                state.currentUser = action.payload;
            })
            .addCase(updateUser.rejected, (state, action) => {
                state.isFetching = false;
                state.isError = true;
                state.errorMessage = action.payload;
            });
    }
});

export const { resetUpdateState } = authSlice.actions;
export default authSlice.reducer;

3. 修正提交函数的调用方式 #

直接dispatch异步Thunk即可：

const onSubmit = async ({ username, email, studentid }) => {
    const user = { username, email, studentid };
    // 调用Thunk，传入id和用户数据
    await dispatch(updateUser({ id, user }));
    // 可选：根据状态做后续处理，比如提示用户或重置表单
};

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