配置Redux Store后页面空白，请求排查React+Redux项目问题

你的代码存在两个关键错误，导致Redux无法正常工作，页面空白：

错误1：createSlice的标识字段错误 #

createSlice需要通过name字段定义slice的名称，你误写为color:'my_color'，这会导致Redux无法正确初始化slice。

错误2：reducer字段拼写错误 #

createSlice中定义 reducer 函数的字段应为复数**reducers**，你写成了单数reducer，导致Redux无法识别你定义的changeColor action。

修正后的colorSlice.js代码 #

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

export const colorSlice = createSlice({
    // 修正：将color改为name
    name:'my_color',
    initialState:{
        color:'red'
    },
    // 修正：将reducer改为reducers（复数）
    reducers:{
        changeColor: (state,action) => {
            state.color = action.payload.color;
        }
    }
})

export const {changeColor} = colorSlice.actions;
export default colorSlice.reducer;

简化后的store.js代码（可选优化） #

import { configureStore } from "@reduxjs/toolkit";
import colorReducer from './colorSlice'

export default configureStore({
    reducer: {
        my_color : colorReducer,
    }
})

其他文件（index.js、App.js、App.css）无需修改。修正后，Redux可以正常初始化store，组件能通过useSelector获取到state.my_color.color的值，页面会显示蓝色盒子和文本“this is a red box”。

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