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.
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
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;
};