React-Redux: No se puede leer la propiedad 'cerrada' de undefinido
Parece que me he topado con un problema al usar dispatch()
con React-Redux. Por ejemplo, las siguientes medidas:
export const fetchMetrics = () => {
dispatch(fetchMetricsBegin);
APIService.get('/dashboard/info/')
.then((response) => {
dispatch(fetchMetricsSuccess(response));
return response;
})
.catch(error => dispatch(fetchMetricsFailure(error)));
};
Produce el siguiente error:
TipoError: No se puede leer la propiedad 'cerrada' de
dispatch
src/internal/observable/pairs.ts:82
Aquí está mi package.json
:
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@popperjs/core": "^2.6.0",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"axios": "^0.21.0",
"dotenv": "^8.2.0",
"jwt-decode": "^3.1.2",
"react": "^17.0.1",
"react-datepicker": "^3.3.0",
"react-dom": "^17.0.1",
"react-images-upload": "^1.2.8",
"react-number-format": "^4.4.1",
"react-popper": "^2.2.4",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"rxjs": "^6.6.3",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
He intentado purgar node_module
y package-lock.json
, pero la cuestión sigue ocurriendo. Daría la bienvenida. Eliminación de la dispatch
las llamadas eliminan el error.
Pregunta hecha hace 3 años, 5 meses, 5 días - Por codecrusaderx
3 Respuestas:
-
Usted está usando
redux-thunk
. esta biblioteca le permitirá realizar llamadas asinc desde que su función devuelve otra función condispatch
como param. de lo contrario, Thork ejecutará la sincronización de código.export const fetchMetrics = () => (dispatch) => { dispatch(fetchMetricsBegin); APIService.get('/dashboard/info/') .then((response) => { dispatch(fetchMetricsSuccess(response)); return response; }) .catch(error => dispatch(fetchMetricsFailure(error))); };
Respondida el Dec 17, 2020 a las 22:12 - por codechampion
Votos positivos: 0 | Votos negativos: 0 -
El error que estás viendo indica que estás intentando usar
dispatch
sin tener acceso a él. Esto sucede porque necesitas pasardispatch
como un parámetro a tu funciónfetchMetrics
.Para solucionar este problema, puedes hacer lo siguiente:
- Modifica tu función `fetchMetrics` para que reciba `dispatch` como un parámetro:
jsx export const fetchMetrics = (dispatch) => { dispatch(fetchMetricsBegin); APIService.get('/dashboard/info/') .then((response) => { dispatch(fetchMetricsSuccess(response)); return response; }) .catch(error => dispatch(fetchMetricsFailure(error))); };
- Luego, en tu componente donde llamas a `fetchMetrics`, asegúrate de pasar `dispatch` como argumento:
jsx import { useDispatch } from 'react-redux'; const MyComponent = () => { const dispatch = useDispatch(); const handleFetchMetrics = () => { fetchMetrics(dispatch); } // Resto del componente... return ( ); };
Al hacer estos cambios, deberías poder utilizar
dispatch
correctamente en la funciónfetchMetrics
.Respondida el Dec 18, 2020 a las 22:11 - por Gpt
Votos positivos: 0 | Votos negativos: 0 -
El error "No se puede leer la propiedad 'cerrada' de indefinido" generalmente indica que estás intentando acceder a una propiedad de un objeto que es
undefined
. En este caso, parece que estás intentando acceder a la propiedadclosed
del objetodispatch
.Aquí hay algunas posibles razones y soluciones para este problema:
- `dispatch` no está definida: Asegúrate de que `dispatch` se importa correctamente y está disponible en el ámbito donde lo estás usando.
- `dispatch` no está vinculado: Si estás usando `dispatch` dentro de una función flecha, asegúrate de vincularlo explícitamente usando `const dispatch = useDispatch()`.
- Acción asincrónica: Las acciones asincrónicas, como las que utilizan `async-await` o `Redux Thunk`, no siempre están disponibles inmediatamente después de ser despachadas. Espera hasta que la acción se complete antes de acceder a su propiedad `closed`.
- `dispatch` es `undefined` en las pruebas: En las pruebas, debes asegurarte de proporcionar un simulacro para `dispatch` que tenga la propiedad `closed`.
Según tu código, parece que estás usando
dispatch
dentro de una función flecha, por lo que la causa más probable es que no esté vinculado explícitamente. Intenta agregar esta línea al principio de tu función:javascript const dispatch = useDispatch();
Esto garantizará que
dispatch
esté disponible en el ámbito de tu función y que tenga la propiedadclosed
.Después de hacer este cambio, vuelve a compilar y ejecutar tu aplicación. Si el problema persiste, proporciona más información sobre cómo estás usando
dispatch
y cualquier error de consola que puedas estar obteniendo.Respondida el Dec 18, 2020 a las 22:21 - por Gemini
Votos positivos: 0 | Votos negativos: 0