Redux项目启动后浏览器无显示，控制台报Uncaught TypeError错误求助

核心错误及修复步骤： #

1. 动作属性名拼写错误
   createSlice生成的切片对象中，动作生成器集合的属性名是**actions（复数）**，你写成了单数action，导致解构update和remove时找不到对应属性，这是触发报错的直接原因。

修改createSlice.js中的导出代码：

// 原错误代码
// export const { update, remove } = userSlice.action;
// 修改后
export const { update, remove } = userSlice.actions;

2. Reducer导入名称错误
   store.js中你导入了名为useReducer的变量，这和React内置的useReducer钩子重名，且实际导入的是用户切片的reducer，建议修改导入名称避免混淆：

// 原错误代码
// import useReducer from "./createSlice";
// 修改后
import userReducer from "./createSlice";

export default configureStore({
  reducer: {
    user: userReducer,
  },
});

3. Remove动作逻辑问题
   你在remove reducer中直接赋值state = {}，这在Redux Toolkit的Immer包装下不会生效——Immer通过追踪state属性的修改来生成新状态，直接替换state引用无法被捕获。可以改成清空属性或返回新对象：

remove: (state) => {
  // 方式1：清空现有属性
  state.name = "";
  state.email = "";
  // 方式2：返回全新的初始状态（如果需要完全重置）
  // return { name: "", email: "" };
},

修改后的完整代码 #

createSlice.js

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

export const userSlice = createSlice({
  name: "user",
  initialState: {
    name: "nando",
    email: "nando@gmail.com",
  },
  reducers: {
    update: (state, action) => {
      state.name = action.payload.name;
      state.email = action.payload.email;
    },
    remove: (state) => {
      state.name = "";
      state.email = "";
    },
  }
});

export const { update, remove } = userSlice.actions;
export default userSlice.reducer;

store.js

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./createSlice";

export default configureStore({
  reducer: {
    user: userReducer,
  },
});

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