Error: Actions may not have an undefined "type" property. You may have misspelled an action type string constant

Question

I'm trying to login and signup in react. using react-redux, thunk v3.1.0, but getting error my auth.types.js file include

Auth.action.js include

auth.reducer.js include

store.js has

[![enter image description here][4]][4]

login.jsx include loginHandle

how can I solve this error

Answer 1

The issue here is that the code is attempting to dispatch the formData object as an action payload.

const formData = {
  email: data.get("email"),
  password: data.get("password"),
  // <-- no type property!
};

...

loginAPI(dispatch(formData)); // <-- dispatch(formData)!

formData is an object with an undefined type property, thus the error you see.

loginAPI is an action creator that is defined to to first receive the formData payload and return the asynchronous action, i.e. Thunk, that is passed the store's dispatch function.

You should be dispatching the loginAPI action to the store.

dispatch(loginAPI(formData));

If you would like to wait for the asynchronous loginAPI action to complete prior to navigating then you may want to await it's settling.

const handleSubmit = async (event) => {
  ...

  try {
    await dispatch(loginAPI(formData));
    navigate("/");
  } catch(error) {
    console.log(error);
  }
};

Be aware also that you are using outdated Redux. Modern Redux is written using Redux-Toolkit which is less boilerplatey and generates a lot of the actions for you so you end up writing significantly less code.