“ Redux表单身份验证不起作用”

Question

我正在尝试使用无法正常工作的redux-form登录用户。当我按下Submit按钮时，它会显示

  

错误：“无法读取未定义的属性”登录”。

另外，请帮助我安装react-native调试器。我已经搜索了文档，但是找不到实现调试器的相关资源

LoginForm.js

import React, {Component} from 'react';
import {
    //StyleSheet,
    View,
    Text,
    TextInput,
    Button    
  } from 'react-native';
  import {reduxForm,Field} from 'redux-form';
  import {connect} from 'react-redux';
  import {login} from './authActions';

  const validate = values =>{
      const errors = {};
      if(!values.username){
          errors.username="Please fill the username"
          return errors;

      }
      if(!values.password){
        errors.password="Please fill the password"
        return errors;

    }
  }

  const myFields = ({label,meta:{error,touched}, input:{onChange}}) =>{
      return(
          <View>
            <Text>{label}</Text>
            <TextInput style={{borderWidth:1,width:300,marginBottom:10}}            
            onChangeText={onChange}/>
            {touched && (error && (<Text style={{color:'red'}}>{error}</Text>))}
          </View>
      );
  }

  const passFields = ({label,meta:{error,touched}, input:{onChange}}) =>{
    return(
        <View>
          <Text>{label}</Text>
          <TextInput style={{borderWidth:1,width:300,marginBottom:10}}
          secureTextEntry={true}        
          onChangeText={onChange}/>
          {touched && (error && (<Text style={{color:'red'}}>{error}</Text>))}
        </View>
    );
}


  const submitbtn = values =>{
      //alert(`here are the values ${JSON.stringify(values)}`);
      //console.log(values);
      this.props.login(values);

  }

  const myLoginForm = props => {
      const {handleSubmit} = props;
      return(
        <View>
            <Field
            name="username"           
            component={myFields}
            label="UserName"/>

            <Field
            name="password"           
            component={passFields}
            label="Password"
           />

            <Button title="Submit"
            onPress={handleSubmit(submitbtn)}/>

        </View>
      );
  }

  const LoginForm = reduxForm({
      form:'loginform',
      validate
  })(myLoginForm);

  const mapStateToProps =(state) =>({
    isAuthenticated: state.auth.isAuthenticated
  });

  export default connect(mapStateToProps,{login})(LoginForm);

authActions.js

export const login = ({username, password}) => {
    return (dispatch, getState) => {

        const config = {
            headers : {
                'Content-type' : 'Application/json'
            }
        }

        const body = JSON.stringify({
            username,
            password
        })

        axios.post('http://localhost:5000/users/login', body , config )
        .then(res => dispatch({
            type : 'LOGIN_SUCCESS',
            payload : res.data 
        }))
        .catch(err => {
            dispatch(returnErrors(err.response.data, err.response.status, 'LOGIN_FAIL'));
            dispatch({
                type : 'LOGIN_FAIL'
            })
        });
    };
}

authReducer.js

import {AsyncStorage} from 'react-native';

const initState = {
    toke: AsyncStorage.getItem('token'),
    isAuthenticated: null,
    isLoading: null,
    user: null
};

const authReducer = (state = initState, action) => {
    switch(action.type){
        case 'USER_LOADING':
        return{
            ...state,
            isLoading: true
        }
        case 'USER_LOADED':
        return{
            ...state,
            isLoading: false,
            isAuthenticated:true,
            user:action.payload
        }
        case 'REGISTER_SUCCESS':
        case 'LOGIN_SUCCESS':
            AsyncStorage.setItem('token', action.payload.token)
        return{
            ...state,
            ...action.payload,
            isLoading: false,
            isAuthenticated:true,            
        }
        case 'AUTH_ERROR':
        case 'LOGOUT_SUCCESS':
        case 'LOGIN_FAIL':
        case 'REGISTER_FAIL':        
        AsyncStorage.removeItem('token')
        return{
            token: null,
            user: null,
            isLoading: false,
            isAuthenticated:false,            
        }
        default:
            return state;


    }
}
export default authReducer