使用Redux-Toolkit触发TypeError错误，请求技术支持

错误信息 #

userSlice.js:22 Uncaught (in promise) TypeError: 无法在字符串 'User created successfully!' 上创建属性 'error'
位置：signInFailure (userSlice.js:22:19)
调用栈：@reduxjs_toolkit.js?v=69e8a274:1773:26

问题场景 #

我在MERN应用中用Redux-Toolkit处理用户状态，当前在切片的reducer函数中遇到上述错误。以下是我的切片代码：

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

const initialState = {
  currentUser: null,
  error: null,
  loading: false,
};

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    signInStart: (state) => {
      state.loading = true;
    },
    signInSuccess: (state, action) => {
      state.currentUser = action.payload;
      state.loading = false;
      state.error = null;
    },
    signInFailure: (state, action) => {
      state.error = action.payload; // 尝试处理对象和字符串类型的payload
      state.loading = false;
    },
});

export const {
  signInStart,
  signInSuccess,
  signInFailure,
  signOutUserStart,
} = userSlice.actions;

export default userSlice.reducer;

我尝试过转换payload类型，但问题依旧：

signInFailure: (state, action) => {  
  state.error = typeof action.payload === 'string'
    ? action.payload
    : 'An error occurred';
  state.loading = false; 
}

问题原因 #

报错核心是：执行signInFailure时，当前的state不是初始定义的对象，而是字符串'User created successfully!'。Redux的reducer中state应始终是切片的状态对象，出现这种情况的常见原因：

1. 某个reducer函数错误地直接返回字符串，替换了整个state对象（比如你导出的signOutUserStart，如果它的reducer实现是返回字符串而非修改state属性）；
2. 异步逻辑（比如thunk）中误调用了action，比如请求成功时错误调用signInFailure，且之前的state已被修改为字符串类型。

解决步骤 #

1. 检查所有reducer实现，确保没有任何一个reducer直接返回非对象值。比如signOutUserStart的正确实现应该是修改state属性，而非替换整个state：

signOutUserStart: (state) => {
  state.currentUser = null;
  state.error = null;
  state.loading = false;
},

2. 排查异步逻辑，确认：

   • 请求成功时调用的是signInSuccess，而非signInFailure；
   • dispatch action时传递的payload是正确的错误信息，没有把成功消息错误传给signInFailure。

3. 添加调试代码定位问题，在signInFailure开头打印当前state的类型和值，确认state异常的来源：

signInFailure: (state, action) => {
  console.log('当前state:', state, '类型:', typeof state); // 调试用
  state.error = typeof action.payload === 'string' ? action.payload : 'An error occurred';
  state.loading = false;
},

内容的提问来源于stack exchange，提问作者Hussien Y Shhade