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, 4 meses, 28 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 con dispatch 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

  Votar positivo

  Votar negativo

---

• El error que estás viendo indica que estás intentando usar dispatch sin tener acceso a él. Esto sucede porque necesitas pasar dispatch como un parámetro a tu función fetchMetrics.

  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 (
          Fetch Metrics
      );
  };
  

  Al hacer estos cambios, deberías poder utilizar dispatch correctamente en la función fetchMetrics.

  Respondida el Dec 18, 2020 a las 22:11 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• 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 propiedad closed del objeto dispatch.

  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 propiedad closed.

  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

  Votar positivo

  Votar negativo

---