Recibo el siguiente error cuando agrego una acción específica en los extraReducers dentro de una porción:
Uncaught TypeError: Cannot read properties of undefined (reading 'type') .
Ejemplo:
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 se define como action1 , en otro archivo:
import { createAction } from '@reduxjs/toolkit' export const action2 = createAction( 'action2' ) ¿Por qué action2 no está definido en mySlice ? ¿Me he perdido algo?
Actualización : de la documentación :
Los creadores de acciones que se generaron con createAction se pueden usar directamente como claves aquí, usando la sintaxis de propiedad calculada.
Si obtuve la oración correctamente, puedo reemplazar esta parte:
builder.addCase(action2, () => ...)
con este:
builder.addCase("action2", () => ...)
Eso de hecho resolvería el problema. ¿Sería correcta esta solución?
Aun así, podría ser bueno entender por qué action2 parece no estar undefined cuando se usa con el primer enfoque.
Lo más probable es que se encuentre con un problema de dependencia de importación circular. ¿Algún otro archivo de corte está importando este también? Si es así, eso generalmente hará que uno de los segmentos no se inicialice en el momento en que se ejecuta la llamada createSlice del otro archivo y, por lo tanto, todos los creadores de acciones que se importan aún no están undefined .
https://redux-toolkit.js.org/usage/usage-guide#exporting-and-using-slices
RTK versión 1.7.0-beta.1 en realidad tiene una solución potencial para este problema, al crear instancias perezosas del reductor. Por favor, intente eso y vea si soluciona las cosas para usted:
https://github.com/reduxjs/redux-toolkit/releases/tag/v1.7.0-beta.1
No entendí su pregunta, pero resolví el error relevante, verifique el código
este es mi código de división de creación
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); }, });este es mi codigo reductor
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; };