电子邮件地址格式错误-响应本机,firebase和redux

时间:2018-11-29 11:55:08

标签: firebase react-native redux react-redux firebase-authentication

我正在尝试使用firebase和redux在react native中登录。但是它给出了错误“电子邮件地址格式错误”。如果我排除该错误并仍然提供电子邮件和密码,则会显示错误消息,提示“密码无效或用户没有密码”。这里可能是什么问题?

如果删除了Firebase部分,则该应用程序将正常运行。输入照常工作。

看看视频here

代码:

App.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import reducers from './src/reducers';
import LoginForm from './src/components/LoginForm';
import firebase from '@firebase/app';
import '@firebase/auth';

export default class App extends Component<Props> {
  componentWillMount() {
    const config = {
      apiKey: 'xxxxxxxxxxxxxxx',
      authDomain: 'xxxxxxxxxxxxxxx',
      databaseURL: 'xxxxxxxxxxxxxxx',
      storageBucket: 'xxxxxxxxxxxxxxx',
      messagingSenderId: 'xxxxxxxxxxxxxxx'
    };

    firebase.initializeApp(config);
  }

  render() {
    return (
      <Provider store={createStore(reducers, {}, applyMiddleware(reduxThunk))}>
        <LoginForm />
      </Provider>
    );
  }
}

动作创作者

import firebase from 'firebase';
import { EMAIL_CHANGED, PASSWORD_CHANGED, LOGIN_USER_SUCCESS } from './types';

export const emailChanged = (text) => {
  return {
    type: EMAIL_CHANGED,
    payload: text
  };
};

export const passwordChanged = (text) => {
  return {
    type: PASSWORD_CHANGED,
    payload: text
  };
};

export const loginUser = ({ email, password }) => {
  return (dispatch) => {
    firebase.auth().signInWithEmailAndPassword(email, password)
    .then(user => {
        dispatch({ type: 'LOGIN_USER_SUCCESS', payload: user });
    });
  };
};

LoginForm.js

import React, { Component } from 'react';
import { } from 'react-native';
import { connect } from 'react-redux';
import { Input, Button, Card, CardSection } from './common';
import { emailChanged, passwordChanged, loginUser } from '../actions';
import firebase from '@firebase/app';
import '@firebase/auth';

type Props = {};
class LoginForm extends Component<Props> {

  onEmailChangeText = (text) => {
   this.props.emailChanged(text);
  }

  onPasswordChangeText = (text) => {
   this.props.passwordChanged(text);
  }

  onButtonPress = () => {
    const { email, password } = this.props;
    this.props.loginUser({ email, password });
  }

  render() {
    return (
      <Card>

        <CardSection>
            <Input
              label='Email'
              placeholder='email@gmail.com'
              onChangeText={(text) => this.onEmailChangeText(text)}
              value={this.props.email}
            />
        </CardSection>

        <CardSection>
            <Input
              label='Password'
              placeholder='Password'
              secureTextEntry
              onChangeText={(text) => this.onPasswordChangeText(text)}
              value={this.props.password}
            />
        </CardSection>

        <CardSection>
            <Button onPress={this.onButtonPress()}>
              Login
            </Button>
        </CardSection>

      </Card>
    );
  }
}

const mapStateToProps = (state) => {
  console.log('mapStateToProps', state.auth);
  return { email: state.auth.email, password: state.auth.password, delete: state.auth.delete };
};

export default connect(mapStateToProps,
  { emailChanged, passwordChanged, loginUser })(LoginForm);

减速器:

import { EMAIL_CHANGED, PASSWORD_CHANGED } from '../actions/types';

const INITIAL_STATE = { email: '', password: '', delete: '' };

export default (state = INITIAL_STATE, action) => {
  console.log('emailReducer', state);
  switch (action.type) {
    case EMAIL_CHANGED:
      return { ...state, email: action.payload };
    case PASSWORD_CHANGED:
      return { ...state, password: action.payload };
    default:
      return state;
  }
};

0 个答案:

没有答案