如何使用枚举值初始化Redux Slice？

尝试用枚举值设置Redux Slice的初始状态时，出现了Uncaught TypeError: undefined has no properties错误，相关代码如下：

export const themeTokenSlice = createSlice({
    name: "themeToken",
    initialState: darkThemeToken,
    reducers: {
        toggleThemeToken: (state) => {
            switch (state.theme) {
                case Themes.dark:
                    state = darkThemeToken;
                    break;
                case Themes.light:
                    state = lightThemeToken;
                    break;
                default:
                    return state;
            }
        }
    }
});

export const darkThemeToken: themeState = {
    theme: Themes.dark
};

export interface themeState {
    theme: Themes;
}

export enum Themes {
    dark = "dark",
    light = "light",
}

目前可行的写法是：

export const darkThemeToken: themeState = {
    theme: "dark" as Themes.dark
};

请问是否存在直接使用枚举初始化状态的方法？

当然可以直接使用枚举初始化状态，报错的核心原因是变量声明顺序问题：你在darkThemeToken之前就定义了themeTokenSlice，此时darkThemeToken还未被初始化，导致initialState拿到的是undefined，进而触发TypeError。

调整代码的声明顺序即可解决：

• 先定义枚举Themes
• 再定义接口themeState
• 接着声明主题状态常量darkThemeToken和lightThemeToken
• 最后创建Redux Slice

修正后的完整代码：

// 先定义枚举
export enum Themes {
    dark = "dark",
    light = "light",
}

// 定义状态接口
export interface themeState {
    theme: Themes;
}

// 声明主题状态常量
export const darkThemeToken: themeState = {
    theme: Themes.dark
};

export const lightThemeToken: themeState = {
    theme: Themes.light
};

// 最后创建Slice
export const themeTokenSlice = createSlice({
    name: "themeToken",
    initialState: darkThemeToken,
    reducers: {
        toggleThemeToken: (state) => {
            switch (state.theme) {
                case Themes.dark:
                    return lightThemeToken; // 注意：不能直接赋值state，需返回新状态
                case Themes.light:
                    return darkThemeToken;
                default:
                    return state;
            }
        }
    }
});

另外需要注意：在Redux Toolkit的reducer中，直接给state赋值不会触发状态更新，需要返回新的状态对象（或者使用Immer提供的可变写法修改属性）。上面的代码已经修正了toggleThemeToken的逻辑，直接返回对应的主题常量，确保状态更新生效。

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