我正在创建一个简单的react应用程序，我还使用redux工具包进行状态管理，但是，正常的RTK功能在我的应用程序中无法正常工作。它包含2个独立的组件，每个组件都有自己的路由。我已经阅读了文档，他们已经创建了一个单页的React应用程序，所以没有真实的的路线涉及。我需要知道更多吗？RTK不足以实现这一目的。
而且，其中一个组件将修改状态，而另一个组件读取状态。下面是代码：
index.js文件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {configureStore} from '@reduxjs/toolkit';
import {Provider} from 'react-redux';
import userreducer from './features/user.js'; 
import themereducer from './features/theme.js';
import {BrowserRouter} from 'react-router-dom';

let firststore=configureStore({
  reducer:{     
    user: userreducer,   
    theme: themereducer,
  }   
});


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={firststore}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
  
);

字符串
app.js文件：

import Profile from "./components/profile";
import Login from './components/login.js';
import {Route,Routes} from 'react-router-dom';

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Profile/>}/>
        <Route path="/log" element={<Login/>}/>
      </Routes>
      
    </>
      
    
  );
}

export default App;

型
切片：

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

export let userslice= createSlice({
    name:"usernameslice",  
    initialState: { value: { name:"", age: 0, email:""}},   
    reducers:{    
        logn: (state,action)=>{
           state.value=action.payload;
        },

        logout: (state,action)=>{
           state.value={name:"",age:0,email:""};
        },
    }
});

     
export const {logn,logout} = userslice.actions;   

export default userslice.reducer;

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

export const themeslice=createSlice({
    name:"theme",
    initialState:{ value: " "},
    reducers:{
        changecolor: (state,action)=>{
            state.value=action.payload;
        }   
    }
});

export const {changecolor} = themeslice.actions;

export default themeslice.reducer;

的字符串
登录组件：

import {logn, logout} from '../features/user.js';
import {useDispatch} from 'react-redux';
import { changecolor } from '../features/theme.js';
import React from 'react';
import {useState} from 'react';

let Login = () => {

    let [col,setCol]= useState("");
    let disp=useDispatch();


    return ( 
        <div>
          <button onClick={()=>{
            disp(logn({name:"abdullah",age:12,email:"675@gmail.com"})); 
          }}>Login</button>
          <button onClick={()=>{
            disp(logout());
          }}>logout
          </button>
          <input type='text' onChange={(e)=>{
            disp(changecolor(e.target.value));
          }}>
          </input>
        </div>
        

    );
}
 
export default Login ;

型
纵断面构件：

import {useSelector} from 'react-redux';

let Profile  = () => {

    let uwe=useSelector((state)=>{ return state.user.value}); 
    let coloriser=useSelector((state)=>{return state.theme.value});
    console.log(uwe);
    console.log(coloriser);

    return (  
        <div style={{color:coloriser}}> 
            <h1>Profile page</h1>
            <p>name: {uwe.name}</p>
            <p>age: {uwe.age}</p>
            <p>email:{uwe.email}</p>
        </div>
    );
};

 
export default Profile;

型
如果有什么需要澄清的，请告诉我。谢谢！