使用ReactJS

我想基于登录用户在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。

iCMS 回答:使用ReactJS

不要同时使用2个调度。结果可能不是预期的。尝试仅使用1。

onEmpAction: (emp_id,isValidCE) => dispatch({type : actionTypes.EMPACTION,val : {id: emp_id,isValidCE: isValidCE})

替换此

         this.props.onEMPPass(emp_id)
         this.props.onValidEMPPass(isValidCE)

与此

this.props.onEmpAction(emp_id,isValidCE)

然后在减速器中

if (action.type === actionTypes.EMPACTION) {
    return {
        ...state,emp_id : action.val.id,isValidCE : action.val.isValidCE
    }
}
本文链接:https://www.f2er.com/1989740.html

大家都在问