如何使用Firebase身份验证在Redux中成功注册用户

Question

I keep getting the error undefined when registering a user.

I'm not sure if react is obtaining the states information correctly. Maybe it could be the onChange value, or maybe im missing something else.

I referenced this

How to implement Firebase authentication with React Redux?

but still unsure, what the error can be.

It shows that the user has been sign up on the backend like this.

Demo

https://stackblitz.com/edit/react-h9ekc4

Actions

export const onEmailSignUpChangeAction = value => ({
    type: EMAIL_SIGN_UP_CHANGE,
    email: value
})

export const onPasswordSignUpChangeAction = value => ({
    type: PASSWORD_SIGN_UP_CHANGE,
    password: value
})



export const onEmptySignUpEmailClick = () => ({
    type: 'EMPTY_SIGN_UP_EMAIL'
})

export const onEmptySignUpPasswordClick = () => ({
    type: 'EMPTY_SIGN_UP_PASSWORD'
})

export const signUp = () => (dispatch, getState) => {
    const {signUpAuth} = getState();
    if (signUpAuth.emailSignUp === '') {
        dispatch(onEmptySignUpEmailClick())
    }
    if (signUpAuth.passwordSignUp === '') { 
        dispatch(onEmptySignUpPasswordClick())
     }
    else {
        firebaseAuth.createUserWithEmailAndPassword(signUpAuth.emailSignUp, signUpAuth.passwordSignUp)
            .then(() => console.log('signUpok'))
                .catch( function (error) {
                        let errorCode = error.code;
                        let errorMessage = error.message;
                        alert(errorMessage)
                });



    }

}

SignUp.js

import React, { Component } from 'react';
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { signUp, onEmailSignUpChangeAction, onPasswordSignUpChangeAction } from '../actions/';
class SignUp extends Component {
  state = {
    email: "",
    password: ""
  }

  // onChange = (e) =>{
  //   this.setState({
  //       [e.target.name] : e.target.value
  //   })
  // }
  handleSubmit = (e) => {
    e.preventDefault();
    const register = this.props.signUp();
    console.log(register);
    (register === true) && this.props.history.push('/');
    console.log(this.state)


  }
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-6">
            <h1>Sign Up</h1>
            <form onSubmit={this.handleSubmit}>
              <div className="form-group">
                <label htmlFor="exampleInputEmail1">Email address</label>
                <input
                  type="email"
                  className="form-control"
                  id="email"
                  onChange={this.props.onEmailSignUpChangeAction}
                  aria-describedby="emailHelp"
                  value={this.props.emailSignUp}
                  placeholder="Enter email" />
                <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div className="form-group">
                <label htmlFor="exampleInputPassword1">Password</label>
                <input
                  type="password"
                  className="form-control"
                  id="password"
                  value={this.props.passwordSignUp}
                  onChange={this.props.onPasswordSignUpChangeAction}
                  placeholder="Password" />
              </div>

              <button type="submit" className="btn btn-primary">Submit</button>
            </form>
          </div>

        </div>
      </div>

    );
  }

}

const mapStateToProps = (state) => ({
  user: state.auth.user,
  emailSignUp: state.signUpAuth.emailSignUp,
  passwordSignUp: state.signUpAuth.passwordSignUp

})

const mapDispatchToProps = (dispatch) => ({
  signUp: () => dispatch(signUp()),
  onEmailSignUpChangeAction: (event) => dispatch(onEmailSignUpChangeAction(event.target.value)),
  onPasswordSignUpChangeAction: (event) => dispatch(onPasswordSignUpChangeAction(event.target.value)),
});


export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SignUp));

Reducers.js

const initialState = {
    emailSignUp: '',
    passwordSignUp: '',
    errorTextEmailSignUp: '',
    errorTextPasswordSignUp: ''

}
export default (state = initialState, action) => {
    switch (action.type) {
        case EMAIL_SIGN_UP_CHANGE:
            return {
                ...state,
                emailSignUp: action.email
            }
        case PASSWORD_SIGN_UP_CHANGE:
            return {
                ...state,
                passwordSignUp: action.password
            }
        case EMPTY_SIGN_UP_EMAIL:
            return {
                ...state,
                errorTextEmailSignUp: 'This field is required'
            }
        case EMPTY_SIGN_UP_PASSWORD:
            return {
                ...state,
                errorTextPasswordSignUp: 'This field is required'
            }
        default:
            return state
    }
}

Answer 1

If you want to pass this.props.emailSignUp and this.props.passwordSignUp into your signUp function you could try:

export const signUp = (email, password) => { return (dispatch) => {

if (email === '') {
    dispatch({ type: EMPTY_SIGN_UP_EMAIL })
}
else if (password === '') { 
    dispatch({ type: EMPTY_SIGN_UP_PASSWORD })
 }
else {
    firebaseAuth.createUserWithEmailAndPassword(email, password)
        .then(() => console.log('signUpok'))
            .catch( function (error) {
                    let errorCode = error.code;
                    let errorMessage = error.message;
                    alert(errorMessage)
            });



    }
  }
}

Then call your function this.props.signUp(this.props.emailSignUp, this.props.passwordSignUp)

Answer 2

You are assigning signUp method's return to subscribed variable but that method does return nothing. Since its execution is asynchronous, you may need to dispatch an action that will cause a reducer to store the created user in the state when creation has succeeded, then make use of a selector for retrieving that user for instance.