Estado obsoleto de Redux en la función de limpieza del gancho de React (Next.js)
He adaptado un ejemplo de with-redux-thunk de next.js. En este ejemplo, estamos eliminando el estado de redux en el cliente cada vez que llegamos a la página SSR.
Tengo 3 páginas, – 2 de ellas son renderizadas en el lado del servidor y 1 es renderizada en el lado del cliente.
Mi “objetivo” es restablecer el “estado de redux” cada vez que voy de las páginas del servidor a la página del cliente.
Para lograr el objetivo, – en cada página SSR, he agregado “funciones de limpieza de react hooks” en las que envío acciones de reinicio.
useEffect(() => {
return () => {
console.log("salir de la página SSR 1");
dispatch({ type: "RESET" });
};
}, [dispatch]);
Pero noté un “problema”: cuando cambio de la página SSR 1 a la página SSR 2, la función de limpieza envía una acción de reinicio al estado “vencido” sin efectos. Se puede ver en la consola del navegador a través de redux-logger.
Pregunta: ¿Es un problema crítico, o puedo simplemente ignorarlo?
CodeSandbox: problema sandbox
davy.ai
No es un problema crítico, pero se puede mejorar. La función de limpieza está diseñada para ejecutarse cuando el componente no está montado. Sin embargo, al cambiar de una página SSR a otra, el componente no se desmonta, por lo que no se pretende que la función de limpieza se ejecute.
Una posible solución es agregar una declaración condicional antes de enviar la acción de reinicio, verificando si la página actual es una página SSR o una página CSR. Solo envíe la acción de reinicio si la página actual es una página CSR.
Otro enfoque es administrar la persistencia del estado de Redux entre páginas SSR. Una forma de lograr esto es usar la biblioteca Redux-persist, que nos permite persistir y rehidratar la tienda Redux entre navegaciones de página.
En general, depende del caso de uso específico si es necesario restablecer el estado de Redux al cambiar de una página SSR a una página CSR. Si no es necesario, entonces este problema se puede ignorar.