Question

我现在已经学习了React几个月了，最近我决定通过学习Redux和Firebase的集成继续向React迈进一步。我在Udemy上购买了这个课程，最终结果是使用firebase和Redux的CRUD网络应用程序。但是，我发现老师相当不高兴，不太擅长解释某些模式，以及为什么他选择特定类型的代码等。

在课程中它只是使用Twitter和谷歌从Firebase登录，但我想在我的网站上实现电子邮件登录 - 所以我试着自己做这个并没有好运。我希望你可以帮助我解决这个问题，也可以告诉我你的答案背后的科学 - 试图理解并更好地了解Redux的工作原理。

基本上，我有两个名为'redurs'和'actions'的文件夹。我理解这个概念，但代码结构是我似乎无法掌握的。在reducers中我有两个名为'index.js'和'user-reducer.js'的文件。

这是index.js的内容：

import { combineReducers } from 'redux';
import userReducer from './user-reducer';

const rootReducer = combineReducers({
    user: userReducer
});

export default rootReducer;

这是user-reducer.js的内容：

import { GET_USER } from '../actions/action-types';

export default function(state = {}, action) {
    switch (action.type) {
        case GET_USER:
            return action.payload;
        default:
            return state;
    }
}

现在，我将向您展示动作文件夹的内容。它也是两个文件，一个叫做'action-types.js'和'user-action.js'。我理解动作类型的概念，其中唯一的代码是：

export const GET_USER = 'GET_USER';

这是user-action.js中的代码：

import { auth } from '../Firebase';
import { GET_USER } from './action-types';

export function getUser(){
    return dispatch => {
        auth.onAuthStateChanged(user => {
            dispatch({
                type: GET_USER,
                payload: user
            });
        });
    }
}

export function performLogin(email, password){
    console.log('clicked login');
    console.log(email);
    console.log(password);
    return dispatch => auth.signInWithEmailAndPassword(email, password);
}

export function performLogout(){
    return dispatch => auth.signOut();
}

我尝试自己创建performLogin方法。原始代码就是这样：

export function twitterLogin() {
    return dispatch => auth.signInWithPopup(twitterProvider);
}

最后但并非最不重要的是，我将在Firebase.js和我的登录页面本身为您提供导出的consts。以下是Firebase的内容：

export const database = firebase.database();

export const auth = firebase.auth();

这是我的登录页面的源代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { Icon, Input, Button, Message } from 'semantic-ui-react';
import {connect} from 'react-redux';
import {performLogin} from './actions/user-action';

class AdminLogin extends React.Component{

constructor(props){
    super(props);

    this.state = {
        email: '',
        password: ''
    };

    this.handleLogin = this.handleLogin.bind(this);
    this.clickLogin = this.clickLogin.bind(this);
}

handleLogin(e){
    this.setState({
        [e.target.name]: e.target.value
    });
}

clickLogin(e){

    console.log('function triggers.');
    performLogin(this.state.email, this.state.password);
}

    render() {
        return (
            <div className="admin-login">
                <div className="admin-login-container">
                    <div className="container-circle">
                    <img src="img/lock-icon.png" className="logo"/>
                    </div>
                    <h1 className="title-label">Administrasjon</h1>
                    <div className="login-form">
                    <form onSubmit={this.props.performLogin(this.state.email, this.state.password)}>
                    <Input iconPosition='left' placeholder='E-postadresse' className="email-input" name="email" onChange={this.handleLogin}>
                    <Icon name='at' />
                    <input />
                    </Input>
                    <Input iconPosition='left' placeholder='Passord' type='password' className="password-input" name="password" onChange={this.handleLogin}>
                    <Icon name='lock' />
                    <input />
                    </Input>
                    <Button color='grey' className="forgot-button">Glemt passord</Button>
                    <Button color='blue' className="signin-button">Logg inn</Button>
                    </form>
                    </div>
                </div>
                <div className="notification-container">

                </div>
            </div>
        );
    }
}

function mapStateToProps(state, ownProps) {
    return {
        user: state.user
    };
}

export default connect(mapStateToProps, {performLogin})(AdminLogin);

所以我的问题是：为什么我的performLogin函数不起作用？而且，我似乎无法找到我的导师提供的代码，也不能找到我自己的代码非常好。这是因为我似乎无法了解React / Redux如何捕获任何类型的错误 - 也无法从代码中获得任何响应。我可能已经习惯了Swift，但不应该将代码放在这些行上（这只是一个例子）：

export function performLogin(email, password){
    return dispatch => auth.signInWithEmailAndPassword(email, password, error) {
    if error === null {
    //provide some kind of success messsage
    } else {
    //throw an error
    }
    }

}

如果登录凭据错误，我似乎无法确定如何返回错误，因为我想通知用户并在错误时显示错误消息。我只想使用Redux登录电子邮件和密码。有人可以帮我这个吗？

提前致谢。

React Redux Firebase身份验证无效

0 个答案: