使用Redux Toolkit的createSlice出现未定义错误致页面空白

你的问题出在action creators的导出语句上，语法完全错误，导致JS无法识别setUserLoginDetails变量，进而抛出未定义错误。

错误原因 #

你写的导出语句：

export default {setUserLoginDetails,setSignOutState} = userSlice.actions

这是无效的JavaScript语法：

• export default 不能直接跟赋值表达式，它需要直接导出一个值
• 解构赋值的写法位置错误，无法正确从userSlice.actions中提取对应的action creators

正确写法 #

直接用命名导出的方式解构userSlice.actions里的方法，这是Redux Toolkit的标准用法：

// 替换原来错误的导出语句
export const { setUserLoginDetails, setSignOutState } = userSlice.actions;

修改后的完整代码 #

import {createSlice} from "@reduxjs/toolkit";
const initialState = {
    name: "",
    email: "",
    photo: "",
};

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setUserLoginDetails:(state,action)=>{
      state.name = action.payload.name;
      state.email = action.payload.email;
      state.photo = action.payload.photo;
    },
    setSignOutState: (state) =>{
        state.name = null;
        state.email = null;
        state.photo = null;
    },
  }
});

// 正确的导出方式
export const { setUserLoginDetails, setSignOutState } = userSlice.actions;

export const selectUserName = (state) => state.user.name;
export const selectUserEmail = (state) => state.user.email;
export const selectUserPhoto = (state) => state.user.photo;

// 导出slice的reducer，用于在store中注册
export default userSlice.reducer;

补充说明：原代码漏了导出slice的reducer，补上export default userSlice.reducer才能在Redux store中正常注册这个user切片。

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