javascript - 如何使用 firebase auth 在 redux 中成功注册用户

Question

注册用户时，我不断收到错误未定义。

我不确定 React 是否正确获取状态信息。也许它可能是 onChange 值，或者我可能缺少其他东西。

我引用了这个

How to implement Firebase authentication with React Redux?

但仍然不确定错误是什么。

这样就表明用户已经在后台注册了。

演示

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

操作

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

如果您想将 this.props.emailSignUp 和 this.props.passwordSignUp 传递到您的 signUp 函数中，您可以尝试:

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)
            });



    }
  }
}

然后调用您的函数this.props.signUp(this.props.emailSignUp, this.props.passwordSignUp)