Cannot read properties of undefined (reading 'type'). Redux

Question

So, i am trying to setup redux in my project. And there is very strange problem showing up in reducer: Uncaught TypeError: Cannot read properties of undefined (reading 'type'). Here is reducer.ts:

import { MarkerActionEnum, MarkerActions, MarkerState } from './types';

const initialState: MarkerState = {
  data: undefined,
};

export function MarkerReducer(
  action: MarkerActions,
  state = initialState,
): MarkerState {
  switch (action.type) {
    case MarkerActionEnum.ADD_MARKER:
      return {
        ...state,
        data: action.payload,
      };
    case MarkerActionEnum.DELETE_MARKER: {
      return { data: undefined };
    }
    default:
      return state;
  }
}

export default MarkerReducer;

and types.ts for reducer:

import { Action } from 'redux';
import { MarkerType } from '../../pages/mapPage/components/CustomMap';

export interface MarkerState {
  data: MarkerType | undefined;
}

export enum MarkerActionEnum {
  ADD_MARKER = 'marker/ADD_MARKER',
  DELETE_MARKER = 'marker/DELETE_MARKER',
}

export interface AddMarkerInterface
  extends Action<MarkerActionEnum.ADD_MARKER> {
  type: MarkerActionEnum.ADD_MARKER;
  payload: { longitude: number; latitude: number };
}

export interface DeleteMarkerInterface
  extends Action<MarkerActionEnum.DELETE_MARKER> {
  type: MarkerActionEnum.DELETE_MARKER;
}

export type MarkerActions = AddMarkerInterface | DeleteMarkerInterface;

Log says that the problem occurs in line 11 of reducer, right in switch (action.type) Does anyone know or stumbled in something like this?

As a side note: it looks like you're may be using some legacy-style patterns for Redux+React-Redux. "Modern Redux" with Redux Toolkit and the React-Redux hooks API should help simplify your code and be easier to work with, especially if you're using TS. (Like, that entire separate "reducer types" file would go away completely!) See our Redux docs tutorials for details: redux-toolkit.js.org/tutorials/overview , as well as redux.js.org/usage/… . — markerikson
– markerikson, Commented May 21, 2022 at 22:32

abender · Accepted Answer · 2022-08-18 12:42:46Z

3

I had the same issue. The problem is the ordering of the parameters. "State" should be the first and "action" the second.

answered Aug 18, 2022 at 12:42

abender

214 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JulienD · Accepted Answer · 2022-05-21 13:17:47Z

0

I'd say it means you have used as argument to dispatch something that is not an action, i.e. has no type property. For example if you have an action builder and forgot the parentheses, like in dispatch(myActionBuilder) instead of dispatch(myActionBuilder()).

answered May 21, 2022 at 13:17

JulienD

7,32310 gold badges57 silver badges88 bronze badges

2 Comments

Иннокентий Михайлов Over a year ago

but it still should return default state isn't it?

JulienD Over a year ago

No, because it throws an error at switch (action.type), so it never reaches the return statement. Just console.log(action) before that point and you will understand where the problem comes from.

Collectives™ on Stack Overflow

Cannot read properties of undefined (reading 'type'). Redux

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related