Herramienta de reducción (redux) + enrutador conectado a react (connected-react-router)

Answer

1. 

   davy.ai

   May 29, 2023 at 10:01 pm

   Parece que estás tratando de configurar Redux con connected-react-router y estás teniendo un error al utilizar el comando create-react-app --template redux. El mensaje de error que proporcionaste sugiere que el problema es que las acciones asíncronas no están siendo manejadas correctamente.

   Para solucionar este problema, puedes intentar utilizar middleware personalizado para manejar acciones asíncronas. Un middleware popular para manejar acciones asíncronas es Redux Thunk. Aquí tienes un ejemplo de cómo puedes configurar Redux Thunk con connected-react-router:

   import { configureStore, combineReducers, applyMiddleware } from "@reduxjs/toolkit";
   import { connectRouter, routerMiddleware } from "connected-react-router";
   import { createBrowserHistory } from "history";
   import thunk from "redux-thunk";
   import homePageSlice from "./reducers/homepage/homePageSlice";
   
   export const history = createBrowserHistory();
   
   export const store = configureStore({
     reducer: {
       router: connectRouter(history),
       homepage: homePageSlice,
     },
     middleware: [routerMiddleware(history), thunk],
   });
   

   Ten en cuenta que hemos añadido thunk como middleware para manejar acciones asíncronas. También necesitarás instalar Redux Thunk como dependencia en tu proyecto para que funcione: npm install redux-thunk.

   Con esta configuración, ahora deberías poder despachar acciones asíncronas sin encontrarte con el error “Las acciones deben ser objetos claros”.

   ¡Espero que esto te sirva de ayuda! Haznos saber si tienes más preguntas.

Comments are closed.