Persistencia de Tareas con LocalStorage en Angular

¿Cómo solucionamos la reactividad de los botones y el counter?

Para ajustar la reactividad en el counter y asegurar que el botón correspondiente esté activo según el filtro seleccionado, necesitamos realizar algunos cambios en nuestro código. Inicialmente, el counter debe reflejar el estado de las tareas mostradas al usuario. En lugar de leer el array de tareas, ahora leemos del estado derivado, tagsByFilter, que contiene el estado de las tareas bajo el filtro activo.

Además, resulta esencial que el botón apropiado se active de acuerdo con el filtro seleccionado. Utilizaremos clases dinámicas con el property binding para activar la clase selected cuando el filtro coincida con el valor esperado. Esto se puede lograr suscribiéndose al filtro y haciendo una validación de igualdad. Gracias a la tipificación, el filtro solo puede estar en uno de tres estados: all, pending o completed, lo cual nos brinda una validación automática de los estados permitidos, evitando errores por typos.

¿Cómo implementamos persistencia usando localStorage?

La persistencia de los datos es crítica en cualquier aplicación para evitar la pérdida de información tras un refresco de página. Vamos a implementar persistencia en nuestra app de tareas usando localStorage, un método de almacenamiento pequeño del navegador:

1. Efectos para guardar cambios: Utilizamos effects, una característica de Angular, para guardar automáticamente cada cambio de estado en localStorage. Se debe instanciar un effect dentro de un constructor que monitoriza los cambios en las tareas y las guarda en localStorage.

2. Serialización: Convertimos el array de tareas en una cadena JSON usando JSON.stringify() antes de almacenarlo para garantizar que localStorage pueda manejarlo correctamente.

3. Almacenamiento y carga de datos: Al iniciar la aplicación, verificamos si ya existen datos en localStorage. De ser así, estos se cargan como estado inicial, deserializándolos nuevamente en un objeto JavaScript utilizando JSON.parse().

¿Cómo manejamos la inicialización con ngOnInit?

Durante la inicialización del componente, utilizamos ngOnInit para cargar las tareas desde localStorage:

1. Verificación de datos: Antes de inicializar el estado de las tareas, comprobamos si localStorage tiene datos almacenados. Si existen, los convertimos de texto a objetos y los utilizamos como estado inicial.

2. Configuración del environment: Eliminamos los estados predeterminados del código y dejamos un array vacío para que se pueble con los datos de localStorage. Esto ayuda a mantener la flexibilidad de la aplicación.

¿Cómo evitamos el borrado accidental de datos?

Un aspecto importante al usar effects es prevenir el borrado accidental de datos debido a que effect se ejecuta al inicio del estado:

• Configuración posinicialización: Para evitar la limpieza del storage cada vez que se inicia la app, configuramos nuestros effects para que se activen después de que el almacenamiento ya se haya leído e inicializado durante el ciclo de vida del componente.

• Uso de injectores: Al mover el effect fuera del constructor, empleamos injectors para garantizar que el effect tenga el contexto necesario para funcionar correctamente.

Con estas estrategias, garantizamos que nuestros datos permanezcan persistentes a través de diferentes sesiones del navegador y que se reactive el estado correcto cuando sea necesario. Así, nuestra aplicación de gestión de tareas no solo es reactiva y sensible al contexto del usuario, sino que también proporciona una experiencia de usuario sólida y consistente. ¡Sigue explorando Angular y sus amplias capacidades para hacer aplicaciones web increíbles!