我想基于登录用户在redux存储中存储多个值,我在登录屏幕上使用以下代码:
我想将emp_id(string)和isValidCE(boolean)值存储到redux存储。
import React,{ Component } from 'react';
import * as actionTypes from '../../store/action'
import {connect} from 'react-redux';
class Login extends Component {
constructor(props){
super(props);
this.state={
username:'',password:'',}
}
async handleclick(event){
event.preventDefault();
var username = this.state.username
var password = this.state.password
var emp_id = "";
var isValidCE = false;
var isValidEmp = false;
var self = this;
await UsersApiService.fetchloginData(username)
.then((res) => {
let userInfo = []
userInfo = res.data
console.log(res.data)
if (userInfo === null)
{
alert("username or password is incorrect")
}
else if(userInfo['password'] === password){
console.log("Login successfull");
console.log(userInfo['validemp'])
console.log(userInfo['emailid'])
UserApiService.checkUser(username)
.then(res => {
console.log(res)
if(res.data.length > 0)
{
//console.log(res.data[0]['emp_id'])
isValidCE = true
emp_id = res.data[0]['emp_id']
this.props.onEMPPass(emp_id)
this.props.onValidEMPPass(isValidCE)
}
console.log('Valid user'+isValidCE)
var uploadScreen=[];
uploadScreen.push(<UploadScreen appContext={self.props.appContext}
emp_id = {emp_id}
isValidEmp = {userInfo['validemp']}
isValidCE = {isValidCE}
emaliid = {userInfo['emailid']}/>)
console.log('new tid '+this.props.tid)
console.log('new susr '+this.props.susr)
self.props.parentContext.setState({loginPage:[],uploadScreen:uploadScreen})
});
}
else
{
alert("username or password is incorrect.")
}
})
.catch(console.log)
}
render() {
return (
<div>
<MuiThemeProvider>
<div >
{/*
<AppBar position ="static" style ={loginStyle} title="Login">
</AppBar>
*/}
<AppBar position='static' style ={loginStyle}>
<Toolbar>
<Typography variant="h6" style = {title}>
Log In
</Typography>
</Toolbar>
</AppBar>
<TextField
hintText="Enter your username"
floatingLabelText="username"
onChange = {(event,newValue) => this.setState({username:newValue})}
/>
<br/>
<TextField
type="password"
hintText="Enter your Password"
floatingLabelText="Password"
onChange = {(event,newValue) => this.setState({password:newValue})}
/>
<br/>
<RaisedButton color="inherit"
label="Submit"
primary ={false}
style={style}
onClick={(event) => this.handleclick(event)}/>
</div>
</MuiThemeProvider>
</div>
);
}
}
const mapstatetoProps = state => {
return {
tid : state.emp_id,susr : state.isValidCE
};
};
const mapDispatchtoProps = dispatch =>{
return {
onEmpPass: (emp_id) => dispatch({type : actionTypes.EMPID,val : emp_id}),onValidEMPPass: (isValidCE) => dispatch({type : actionTypes.VALIDCE,val : isValidCE})
};
}
export default connect(mapstatetoProps,mapDispatchtoProps) (Login);
action.js代码是:
export const EMPID = 'EMPID'
export const VALIDCE = 'VALIDCE'
和reducer.js具有:
import * as actionTypes from './action'
const initialState = {
emp_id: "",isValidCE : false
}
const reducer = (state = initialState,action) => {
if (action.type === actionTypes.EMPID) {
return {
...state,emp_id : action.val
}
}
if (action.type === actionTypes.VALIDCE) {
return {
...state,isValidCE : action.val
}
}
return state;
};
export default reducer;
我可以在console.log(this.props.tid)中看到emp_id ... 但是第二个控制台显示为undefine。