如何解决在我的应用程序 + react-redux +react-router 中捕获我的操作状态的更好方法
我创建了一个示例来在我的应用程序中使用 react-redux 并打印我的测试值,我怀疑这里是否存在其他方法来捕获商店的状态并且不编写代码 {{1 }} 来捕捉我将保存的 reduce 的值。
感谢大家
文件::应用程序
login[0].user
import React from 'react'
import { browserRouter,Route,Switch } from 'react-router-dom'
import Login from '../pages/Login'
import NotFound from '../pages/404'
const App = () => (
<browserRouter>
<Switch>
<Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
<Route component={NotFound}/>
</Switch>
</browserRouter>
)
export default App
文件存储
import React from 'react'
import {connect} from 'react-redux'
const Login = (...login) => {
console.log("value before")
console.log(login)
const loginUser = login[0].user;
console.log("valor after")
console.log(loginUser)
}
const mapStateProps = (state)=>{
return{
user: state.loginUser,};
}
const wrapper = connect(mapStateProps);
const component = wrapper (Login);
export default component
文件缩减器
import { createStore,combineReducers } from 'redux'
import loginUser from './Redux/reducer/loginUser'
const reducer =combineReducers({loginUser})
const store = createStore(reducer)
export default store
文件操作创建者
const defautlState={username:'test',password:'test'};
function reducer(state= defautlState,{type,payload}){
switch(type){
case 'saveSession':{
return {
username:'test2',password:'test2'
};
}
default:
return state;
}
}
export default reducer;
解决方法
您需要 login[0]
的原因是您在此处定义 Login
的方式:
const Login = (...login) => {
...
表示 login
是一个 rest parameters 数组,并且您的 Login
组件可以接受任意数量的参数。这是不对的,因为 React 组件只能接受一个参数,即 object
的 props。
你想这样定义它:
const Login = (props) => {
const user = props.user;
// rest of the component
}
或者你可以destructure参数:
const Login = ({user}) => {
// rest of the component
}
您也可以不接受任何参数并从 useSelector
而不是 connect
获取 user
的值。
import React from 'react';
import {useSelector} from 'react-redux';
const Login = () => {
const user = useSelector( state => state.loginUser );
// rest of the component
}
export default Login;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。