我一直在尝试在各种小型Web项目上训练我的Redux技能。目前，我坚持使用这个简单的Web应用程序，它提供了蓝色框的颜色，原则上它应该返回红色作为文本。但现在我得到了一个空白页面。
我已经给出了下面的代码，所以它更清楚。首先，我做了一个新的文件夹，并称之为redux。
redux文件夹包含colorSlice.js和store.js
colorSlice.js:

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

export const colorSlice = createSlice({

    color:'my_color',

    initialState:{
        color:'red'
    },
    reducer:{
        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 colorSlice, { changeColor } from "./colorSlice";
import colorReducer from './colorSlice'
export default configureStore({
    reducer: {
        my_color : colorReducer,

    }
    


})

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './redux/store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
   <Provider store={store}>
    <App />

   </Provider>
    
 
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))

App.js

import './App.css';
import { useSelector } from 'react-redux';

function App() {
  const colorbox = useSelector(state => state.my_color.color)
  return (
    <div className="App">
    <div className="bluebox">this is a {colorbox} box</div>
     
    </div>
  );
}

export default App;

App.css

.bluebox{
  align-items: center;
  text-align: center;
  width: 200px;
  height: 200px;
  margin: 20%;
  background-color: rgb(50, 50, 222);

}