我正在创建一个简单的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;
型
如果有什么需要澄清的,请告诉我。谢谢!
1条答案
按热度按时间cig3rfwq1#
据我所知,代码按预期工作,状态正确更新,但您没有使用浏览器路由器(React路由器)从“/log”导航到“/”,我假设您正在使用浏览器中的返回箭头或刷新页面,这将重新加载应用程序,状态将被重新初始化。要么保持状态,这样即使你重新刷新状态也会被保留,或者使用react router的导航系统:
字符串
或者简单地在登录后重定向到“/”,以查看状态的更改:
型