2

I am trying to run a firebase login function from a component in a react app. However, when I call it it isn't firing and I can't figure out why. I double and triple checked my spellings, casings and imports, and I still can't figure it out. Would someone mind taking a look? Thanks! The function I am trying to call is login user and I have commented where it is and also included the function. 

//function to-be called
import axios from 'axios';

export const loginuser = (userData) => (dispatch) => {

  console.log("loginuser hit");  //this is not firing and neither is my function.  

  axios
    .post('/login', userData)
    .then((res) => {
      axios.defaults.headers.common['Authorization'] = res.data.token;
      console.log(res.data.token);
    })
    .catch((err) => {
      console.log("error in axios login");
    });
};

/////class calling the function (in a different file)

import { loginuser } from './redux/userfunctions'


class Login extends Component {



  constructor() {
    super();
    this.state = {
      email: '',
      password: '',
    };
  }


handleSubmit = (event) => {
  event.preventDefault();
  console.log("submit selected");
  const userData = {
      email: this.state.email,
      password: this.state.password
    };
    loginuser(userData);  //this is where I call the function
  };



  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

render() {
 return (
    <div className = "sign-in">
      <Topbar />
    <form onSubmit={this.handleSubmit}>
        <input
        type = "text"
        placeholder="Email"
        name="email"
        value={this.state.email}
        onChange = {this.handleChange}
        />

        <input
        type = "password"
        placeholder= "Password"
        name="password"
        value={this.state.password}
        onChange = {this.handleChange}
        />

        <button type = "submit"> Sign In </button>
      </form>

    </div>
  );
}
}

Thanks again!

Matthew Goralka
  • 49
  • 3
  • Your function returns another function that accepts `dispatch` as a parameter. You probably copied it from an example where someone was using redux. Remove this part `(dispatch) =>` – GusRuss89 Oct 31 '19 at 00:39

1 Answers1

0

I can see 4 errors in your code

  • Your component needs to be wrapped by the HOC connect to use a dispatch action
  • You must return your axios call (as it is a Promise, the dispatcher will be able to wait before dispatching the result to the action)
  • You have to use the dispatch method as described in the doc
  • You have to pass the action to dispatch to the connect function and use it via this.props.myDispatchFunction (e.g this.props.loginuser)
//function to-be called
import axios from 'axios';

export const loginuser = (userData) => (dispatch) => {

  console.log("loginuser hit");  //this is not firing and neither is my function.  
  // Added the return here
  return axios
    .post('/login', userData)
    .then((res) => {
      axios.defaults.headers.common['Authorization'] = res.data.token;
      console.log(res.data.token);
    })
    .catch((err) => {
      console.log("error in axios login");
    });
};

/////class calling the function (in a different file)
import { connect } from 'react-redux' // Added the import of the connect function
import { loginuser } from './redux/userfunctions'


class Login extends Component {



  constructor() {
    super();
    this.state = {
      email: '',
      password: '',
    };
  }


handleSubmit = (event) => {
  event.preventDefault();
  console.log("submit selected");
  const userData = {
      email: this.state.email,
      password: this.state.password
    };
    this.props.loginuser(userData);  // Use the this.props.loginuser instead of directly using the function to trigger the dispatcher
  };

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

render() {
 return (
    <div className = "sign-in">
      <Topbar />
    <form onSubmit={this.handleSubmit}>
        <input
        type = "text"
        placeholder="Email"
        name="email"
        value={this.state.email}
        onChange = {this.handleChange}
        />

        <input
        type = "password"
        placeholder= "Password"
        name="password"
        value={this.state.password}
        onChange = {this.handleChange}
        />

        <button type = "submit"> Sign In </button>
      </form>

    </div>
  );
}
}

export default connect(null, { loginuser })(Login); // Wrapped the component with the `connect` function and added the dispatch function.

I've added some comments to your code + changed some stuff to fix it

oktapodia
  • 1,695
  • 1
  • 15
  • 31