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

[moezbenrebah]

Hello all,
I got a no-sense error that occurs whenever I want to dispatch an action:
Error:

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

my code:

const { applyMiddleware } = require('redux');
const { configureStore } = require('@reduxjs/toolkit');
const thunk = require('redux-thunk');
const fetch = require('node-fetch');
const {
  LOGIN,
  LOGIN_SUCCESS,
  LOGIN_FAILURE
} = require ('./uiActionTypes.js');

const login = (email, password) => {
  return {
    type: LOGIN,
    user: { email, password },
  }
};

const loginSuccess = () => {
  return {
    type: LOGIN_SUCCESS
  }
}

const loginFailure = () => {
  return {
    type: LOGIN_FAILURE
  }
}

const reducers = (state={}, action) => {
  switch(action.type) {
    case LOGIN:
      return {...state, ...action};
    case LOGIN_SUCCESS:
      return {...state, LOGIN_SUCCESS};
    case LOGIN_FAILURE:
      return {...state, LOGIN_FAILURE};
    default:
      return state;
  }
}

const loginRequest = (email, password) => (dispatch) => {
  dispatch(login(email, password))
  fetch('some API...')
    .then( response => dispatch(loginSuccess()))
    .catch( error => dispatch(loginFailure()))
};

const store = configureStore({reducer:reducers}, applyMiddleware(thunk));

store.subscribe(() => {console.log(store.getState())});
store.dispatch(loginRequest("test@test", 123));

Running the above should return :

{ type: 'LOGIN', user: { email: 'test@test', password: 123 } }

What I got:

{ type: 'LOGIN', user: { email: 'test@test', password: 123 } }
...throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(8) : 'Actions may not have an undefined "type" property. You may have misspelled an action type string constant.');
            ^

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

[phryneas]

Multiple things here:

• you cannot just change createStore to configureStore. Those actually are used differently from each other. configureStore is not used with applyMiddleware.
• Generally, you are writing a very outdated style of Redux here that you should not be writing in a new production application any more. If you are following a tutorial, it's about 4 years outdated. Modern Redux does not have switch..case reducer, ACTION_TYPES, immutable reducer logic, hand-written action creators or anything of the likes.
• my guess here would be that one of those LOGIN_SUCCESS action types you are importing is imported incorrectly and actually undefined

All that said: unless you have a very good reason (and the only reason I can think of is that someone is paying you to work on a legacy application), please follow a modern tutorial instead. You could for example follow our official tutorial