Getting action is undefined whenever I start my React Application

Question

I don't understand the error I am facing. Whenever I start the react server, My App gets crashed without even dispatching a redux action I tried console logging the action object and it is undefined and also all the actions that I have Written are proper. Can't Find the problem

My Reducer File

import { UserActionTypes } from '../ActionTypes/UserActionTypes';
const INITIAL_STATE = {
  user: null,
  error: '',
};
interface StateType {
  user: UserType | null;
  error: string;
}
interface userSignInStartAction {
  type: UserActionTypes.USER_SIGN_IN_START;
  payload: {
    email: string;
    password: string;
  };
}
interface userSignInFailAction {
  type: UserActionTypes.USER_SIGN_IN_FAIL;
  payload: string;
}
interface userSignInSuccessAction {
  type: UserActionTypes.USER_SIGN_IN_SUCCESS;
  payload: UserType;
}
type ActionType =
  | userSignInFailAction
  | userSignInSuccessAction
  | userSignInStartAction;
const reducer = (action: ActionType, state: StateType = INITIAL_STATE) => {
  switch (action.type) {
    case UserActionTypes.USER_SIGN_IN_SUCCESS:
      return {
        ...state,
        user: action.payload,
      };
    case UserActionTypes.USER_SIGN_IN_FAIL:
      return {
        ...state,
        error: action.payload,
      };
    default:
      return state;
  }
};

export default reducer;

store.ts

import { applyMiddleware, createStore, combineReducers } from 'redux';
import logger from 'redux-logger';
import userReducer from './reducers/userReducer';

const rootReducer = combineReducers({
  user: userReducer,
});

export const store = createStore(rootReducer, applyMiddleware(logger));

export type RootState = ReturnType<typeof rootReducer>;
export type AppDispatch = typeof store.dispatch;

actions.ts

import { UserType } from '../../graphql/types';
import { UserActionTypes } from '../ActionTypes/UserActionTypes';

export const userSignInSuccess = (user: UserType) => ({
  type: UserActionTypes.USER_SIGN_IN_SUCCESS,
  payload: user,
});
export const userSignInFail = (error: string) => ({
  type: UserActionTypes.USER_SIGN_IN_FAIL,
  payload: error,
});

Error

Uncaught TypeError: Cannot read property 'type' of undefined
    at reducer (userReducer.ts:32)
    at redux.js:436
    at Array.forEach (<anonymous>)
    at assertReducerShape (redux.js:434)
    at combineReducers (redux.js:499)
    at Module.<anonymous> (store.ts:5)
    at Module../src/redux/store.ts (store.ts:10)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Module.<anonymous> (index.css?bb0a:82)
    at Module../src/index.tsx (index.tsx:31)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.1 (reportWebVitals.ts:16)
    at __webpack_require__ (bootstrap:856)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Answer 1

THIS ANSWER IS INCORRECT - OP has sate/action reversed. I can't delete, so please ignore.

initial call to the reducer will NOT have a value for action, and therefore not have a value for action.type you have a default value for state, but not action - you need to detect this default case BEFORE you call switch. maybe something like:

  switch (action && action.type) { //short-circuit if action not defined
    case UserActionTypes.USER_SIGN_IN_SUCCESS:
      return {
        ...state,
        user: action.payload,
      };
    case UserActionTypes.USER_SIGN_IN_FAIL:
      return {
        ...state,
        error: action.payload,
      };
    default:
      return state;
  }