CODEWITHSUNDEEP
javascriptreduxredux-toolkitredux-reducers
L. Pier Roberto
L. Pier Roberto

Reputation: 750

Redux toolkit: Uncaught TypeError: Cannot read properties of undefined (reading 'type')

I get the following error when I add a specific action in the extraReducers inside a slice:

Uncaught TypeError: Cannot read properties of undefined (reading 'type').

Example:

import { createSlice } from '@reduxjs/toolkit'

export const mySlice = createSlice({
  name: 'name',
  initialState,
  extraReducers: (builder) => {
    // If I console.log action2 here, it turns out to be undefined
    builder.addCase(action1, () => ...) 
    builder.addCase(action2, () => ...) // when I add this specific action I get the error.
  },
  reducers: {
    ...
  },
})

action2 is defined like action1, in another file:

import { createAction } from '@reduxjs/toolkit'

export const action2 = createAction(
  'action2'
)

Why action2 is undefined in mySlice? Did I miss something?

Update: from the documentation:

Action creators that were generated using createAction may be used directly as the keys here, using computed property syntax.

If I got the sentence properly, I can replace this part:

builder.addCase(action2, () => ...)

with this:

builder.addCase("action2", () => ...)

That indeed would resolve the problem. Would this solution be correct?

Even so, it could be nice to understand why action2 appears to be undefined when used with the first approach.

Upvotes: 7

Views: 9806

Answers (4)

Lhi Olorunkunle
Lhi Olorunkunle

Reputation: 140

Do ensure you have added the slice in question to the store before attempting to call it's properties.

Upvotes: 2

Tanvir
Tanvir

Reputation: 67

I was also facing the same problem. you're likely trying to access a property of an object that is undefined. This error occurs when you try to access a property of an object that is undefined or null. check your createAsyncThunk()

Upvotes: -2

Anuj
Anuj

Reputation: 71

I didn't understand your question, but i solved the relevant error, please check the code

this is my creating slice code

const counterSlice = createSlice({
  name: "Counter",
  initialState: initialState,
  reducers: {
    incer: studentData,
    decrement: Decrement,
  },
  extraReducers(builder) {
    builder
      .addCase(fetchPost.pending, postsRequested)
      .addCase(fetchPost.fulfilled, postsRecived)
      .addCase(fetchPost.rejected, postReuestFailed);
  },
});

this is my reducer code

export const postsRequested = (state, action) => {
  state.status = "loading";
};

export const postsRecived = (state, action) => {
  state.status = "Sucess";
  const loadedPost = action.payload;
  state.students.push(loadedPost);
};

export const postReuestFailed = (state, action) => {
  state.status = "Failed";
  state.error = action.error.message;
};

Upvotes: 1

markerikson
markerikson

Reputation: 67469

You are most likely running into a circular import dependency issue. Are any other slice files importing this one as well? If so, that will usually cause one of the slices to not be initialized at the time that the other file's createSlice call runs, and thus all the action creators being imported are still undefined.

https://redux-toolkit.js.org/usage/usage-guide#exporting-and-using-slices

RTK version 1.7.0-beta.1 actually has a potential fix for this issue, by lazily-instantiating the reducer. Please try that out and see if it fixes things for you:

https://github.com/reduxjs/redux-toolkit/releases/tag/v1.7.0-beta.1

Upvotes: 5

Related Questions