Reactjs react redux/firebase用户注册失败

Reactjs react redux/firebase用户注册失败,reactjs,firebase,google-cloud-firestore,react-redux,e-commerce,Reactjs,Firebase,Google Cloud Firestore,React Redux,E Commerce,我正在建立一个电子商务商店,React/Redux目前处于停滞状态,我已在我的App.js中路由我的页面,并将所有路由打包。虽然我的标题中的链接将用户重定向到相应的页面,但实际上我无法登录或注册新用户。我的目标是让新用户在注册页面上注册,然后重定向到登录页面,并将用户数据存储在我的firestore数据库以及我的google登录中 import React, { useEffect } from 'react'; import { useDispatch } from 'react-redux

我正在建立一个电子商务商店,React/Redux目前处于停滞状态,我已在我的App.js中路由我的页面,并将所有路由打包。虽然我的标题中的链接将用户重定向到相应的页面,但实际上我无法登录或注册新用户。我的目标是让新用户在注册页面上注册,然后重定向到登录页面,并将用户数据存储在我的firestore数据库以及我的google登录中

import React, { useEffect } from 'react';
import {  useDispatch } from 'react-redux';
import { Switch, Route } from 'react-router-dom';
import { checkUserSession } from './redux/User/user.actions';

// components
import AdminToolbar from './components/AdminToolbar'; 

// hoc
import WithAuth from './hoc/withAuth';
import WithAdminAuth from './hoc/withAdminAuth';

//layouts
import MainLayout from './layouts/MainLayout';
import HomepageLayout from './layouts/HomepageLayout';
import AdminLayout from './layouts/AdminLayout';
import DashboardLayout from './layouts/DashboardLayout'

//pages
import Homepage from './pages/Homepage';
import Registration from './pages/Registration';
import Login from './pages/Login';
import Recovery from './pages/Recovery';
import Dashboard from './pages/Dashboard';
import Admin from './pages/Admin';
import './default.scss';

const App = props => {
    const dispatch = useDispatch();


    useEffect(() => {
        dispatch(checkUserSession());

    }, []);

        return (
            <div className="App">
                <AdminToolbar/>
                <Switch>
                    <Route exact path="/" render={() => (
                        <HomepageLayout >
                            <Homepage />
                        </HomepageLayout>
                    )} />
                    <Route path="/registration" render={() => (
                        <MainLayout>
                            <Registration />
                        </MainLayout>
                    )} />
                    <Route path="/login"
                        render={() => (
                            <MainLayout>
                                <Login />
                            </MainLayout>
                        )} />
                    <Route path="/recovery" render={() => (
                        <MainLayout>
                           <Recovery />
                        </MainLayout>
                    )} />
                    <Route path="/dashboard" render={() => (
                        <WithAuth>
                        <MainLayout>
                            <Dashboard />
                            </MainLayout>
                            </WithAuth>
                    )} />
                    <Route path="/admin" render={() => (
                        <WithAdminAuth>
                            <AdminLayout>
                           <Admin />
                           </AdminLayout>
                           </WithAdminAuth>
                    )} />
                </Switch>
            </div>
        );
    }


export default App;

import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useHistory } from 'react-router-dom';
import { emailSignInStart, googleSignInStart } from './../../redux/User/user.actions';
import './styles.scss';


import AuthWrapper from './../AuthWrapper';
import FormInput from './../forms/FormInput';
import Button from './../forms/Button';

const mapState = ({ user }) => ({
    currentUser: user.currentUser
});

const SignIn = props => {
    const dispatch = useDispatch();
    const history = useHistory();
    const { currentUser } = useSelector(mapState);
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    useEffect(() => {
        if (currentUser) {
        resetForm();        
        history.push('/');
      }

    }, [currentUser]);

    const resetForm = () => {
        setEmail('');
        setPassword('');
    };

    const handleSubmit =  e => {
        e.preventDefault();
        dispatch(emailSignInStart({ email, password }));
     }

    const handleGoogleSignIn = () => {
        dispatch(googleSignInStart());
    } 

    const configAuthWrap = {
            headline: 'LogIn'
        };

        return (
            <AuthWrapper {...configAuthWrap}>
                    <div className="formWrap">
                        <form onSubmit={handleSubmit}>

                            <FormInput
                                type="email"
                                name="email"
                                value={email}
                                placeholder="Email"
                                handleChange={e => setEmail(e.target.value)}
                            />


                            <FormInput
                                type="password"
                                name="password"
                                value={password}
                            placeholder="Password"
                            handleChange={e => setPassword(e.target.value)}
                            />

                            <Button type="submit">
                                LogIn
                            </Button>

                            <div className="socialSignin">
                            <div className="row">
                                <Button onClick={handleGoogleSignIn}>
                                        Google Sign In
                                </Button>
                                </div>
                        </div>

                        <div className="links">
                            <Link to="/recovery">
                              Reset Password
                            </Link>
                        </div>

                        </form>
                    </div>
</AuthWrapper>
        );    
    }



export default SignIn;