Sincronización de Estados en React con Local Storage

Curso de React.js: Patrones de Render y Composición

Contenido del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

19
Patrones de Render en React.js: Principios y Técnicas Avanzadas
01:44 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0016:05

Sincronización de Estados en React con Local Storage

Curso de React.js: Patrones de Render y Composición

Clase 15 de 19

Clase 15 / 19

Recursos

¿Cómo detectar cambios en el almacenamiento local de la aplicación?

Es clave mantener la sincronización entre las diferentes ventanas y pestañas cuando varios usuarios usan una misma aplicación. Un buen ejemplo es la funcionalidad implementada en Todo Machine para detectar cambios en el almacenamiento local del navegador. El objetivo aquí es ejecutar un código cuando el almacenamiento local cambie, lo que permite a los usuarios ver actualizaciones en tiempo real entre las pestañas.

¿Cómo manejar el evento de cambios en el almacenamiento?

Para detectar los cambios, puedes añadir un listener al objeto window, escuchando específicamente el evento de ‘storage’. Sigue estos pasos:

Añadir el listener: Utiliza window.addEventListener para escuchar cambios en el almacenamiento local.
Crear una función de callback: Esta función reaccionará a la información devuelta acerca del cambio, usando un objeto como change.
Condicional para cambios específicos: Verifica si el cambio se produjo en la clave deseada, en este caso, toDosVersion1.
Resetear el estado: Si hay un cambio, actualiza el estado, indicando a la aplicación que muestre una alerta visual.

window.addEventListener('storage', (change) => {
  if (change.key === 'toDosVersion1') {
    console.log('Hubo cambios en toDos-Versión1');
    // Actualiza el estado para mostrar la alerta
    setStorageChange(true);
  }
});

Es importante señalar que React requiere un elemento de retorno para cada componente, así que asegura un retorno de null cuando no se debe mostrar nada.

¿Cómo actualizar la interfaz cuando hay cambios?

Después de detectar cambios, se debe comunicar a los usuarios mediante una interfaz visual. Implementa los siguientes pasos para mejorar la experiencia de usuario:

¿Cómo presentar información de cambios?

Incorporar un botón de refresco:
- Añade un botón que permita al usuario recargar la información manualmente.
- Este botón puede llamarse como “Refrescar” o “Actualizar”.
Controlar eventos del botón:
- Escucha los clics en el botón con un listener de eventos y llama a una función que actualice la visualización.

<div>
  <p>Hubo cambios</p>
  <button onClick={toggleShow}>Refrescar</button>
</div>

¿Cómo mantener la sincronización en múltiples pestañas?

Al trabajar con un Custom Hook como UseLocalStorage, aquí tienes cómo asegurar la sincronización:

Crear nuevos estados para sincronización:
- Introduce un estado que te permita saber si los datos están sincronizados.
Disparar efectos al cambiar el estado:
- Usa el nuevo estado en el array de dependencias de useEffect, permitiendo reejecutar el efecto.

const [synchronizeItem, setSynchronizeItem] = useState(true);

useEffect(() => {
  if (synchronizeItem) {
    // Cargar datos desde Local Storage...
    setLoading(true);
    // Actualización del estado cuando se complete la sincronización.
    setTimeout(() => {
      setLoading(false);
      setSynchronizeItem(true);
    }, 1000);
  }
}, [synchronizeItem]);

Además, comparte las funciones y los estados necesarios entre los componentes para una integración fluida.

¿Cómo mejorar la experiencia visual y funcional?

Después de que la funcionalidad básica esté implementada, añade mejoras estéticas y funcionales:

Aplicar estilos CSS elegantes:
- Mejora la presentación de las alertas visuales con CSS para hacerlas atractivas.
Gestionar estados de carga:
- Asegúrate de que los To Do's no aparezcan durante la sincronización, para lo cual puedes ajustar la lógica en componentes como ToDoList.

Estos pasos aseguran que tu aplicación no solo está técnicamente sólida, sino que también ofrece una experiencia de usuario de primera calidad. El compromiso con la interfaz y la funcionalidad hará que tu aplicación sobresalga. Continúa explorando, experimentando y optimizando para seguir aprendiendo y mejorando tus habilidades en el desarrollo de software. ¡El mundo del código es tuyo!

Carlos Ponce

Hace 5 años

El reto es bastante sencillo... bueno para mí qué tengo experiencia animando cosas con css y js. El único problema está en que firefox no permite hacer un drop image en este contendor :( no lo podrán ver.

Lo único que hice es agregar condiciones que involucren clases para ciertos elementos que serán afectados con los estados de la página

Como pueden ver aquí, solo agregué como dependencia del elemento él prop.loading

Aquí se ve el uso que le doy, si la página está cargando, agrego una opacidad en los items y posicione un pseudo-elemento para evitar el uso de los items

<li className={`TodoItem ${props.loading? 'TodoItem-Loading' : ''}`}>

Sin necesidad de modificar el código que tenemos y sin cambios bruscos al momento de carga la nueva información

Quizás cuando termine el curso deje el repositorio para que lo vean

Carlos Ponce

Hace 5 años

Por cierto, también agregué estilos al botón, dándole su propio div y un fondo que evita interactuar con lo que hay debajo de él

function ChangeAlert({ show, toggleShow }) {
    if(show) {
        return (
            <div className="TODOs__pop-master">
                <div className="dark_bg"></div>
                    <div className="TODOs__pop-reload">
                        <p>¡Se han actulizado los TODOs!</p>
                        <button
                            onClick={() => toggleShow()}
                        >
                            Recargar la información
                        </button>
                    </div>        
            </div>
        )
    } else return null
}

Bastante sencillo :l

Comentarios (64)64 comentarios

Juan Castro

Profesor

Deyson García

Francisco Sarria

Reinaldo Mendoza

Rodrigo Milesi

Luis Alejandro Vera Hernandez

Kevin Daniel Hincapie Lumbaque

Hace 4 años

Gerardo Castillo

Kevin Parra

Eduardo Robles

Víctor Fabián Morales Rodríguez

Iván Garcia

Armando Rivera

Edward Roy Luna Raraz

Hace 3 años

Pedro Roberto Capriles Morales

Andrea Viviana Diaz Fonseca

Manuel Salvador

Kevin J. Zea Alvarado

Ulqernesh Karvenae

Maia aizner

Hace 2 años

Daniel Morales

Hector Rubio

Gustavo A. González G.

Max Andy Diaz Neyra

Julian David Toro Medina

Víctor Illanes Soto

Ricardo Rito Anguiano

Iván Rodríguez

Luis E. Gama Ramirez

David Prado

Gabriel Diaz

Introducción

Patrones de Render en ReactJS: Mejora tu Código y Organización

Principios de Diseño de React: Filosofía y Aplicación Práctica

Composición de componentes

Composición de Componentes en React: Principios y Prácticas

Composición y Colocación de Estado en React con Patrones de Renderización

Optimización de Composición de Componentes en React

Composición Saludable con React Context en Aplicaciones React

Eliminación de React Context mediante Custom Hooks en React

Render props

Render Props y Render Functions en React: Patrones Avanzados

Render Props en React: Mejora de Componentes con Ejemplo de To-Do List

Validación y optimización de Render Props y Render Functions en React

Uso de React.Children y React.CloneElement para Composición Avanzada

High Order Components

Funciones y Componentes de Orden Superior en JavaScript y React

Práctica de High-Order Components en React

Sincronización de Cambios en React con StorageListener

Sincronización de Estados en React con Local Storage

Sincronización y validación de to-do list con local storage

React Hooks

Comparativa de Patrones: Render Props vs React Hooks

Conversión de HighOrder Components a Custom Hooks en ReactJS

Próximos pasos

Patrones de Render en React.js: Principios y Técnicas Avanzadas

Sincronización de Estados en React con Local Storage

Progreso del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

Recursos

Recursos