# Store Basado en RxJS con Historial ## Explorando la Implementación de un Store Reactivo en TypeScript con Gestión de Historial Utilizando RxJS En este **experimento**, exploraremos la implementación de un store basado en RxJS con la capacidad de gestionar un historial de estados en una aplicación TypeScript. Este store utiliza la biblioteca RxJS para manejar observables y proporciona funciones para establecer, actualizar y observar estados. Podemos acceder aquí a la demo: [reactivity](https://blog.mutiitu.com/static/css-experiments/reactivity/index.html)  ## Introducción En el desarrollo de aplicaciones, tener un mecanismo eficiente para gestionar y observar el estado es crucial. El uso de RxJS, una biblioteca de programación reactiva, nos permite implementar un store que facilita la administración del estado y proporciona funcionalidades avanzadas como observar cambios y gestionar un historial de estados. ### Implementación del Core Store El código proporcionado implementa un CoreStore genérico que puede manejar cualquier tipo de datos. A continuación, se destacan algunas características clave del código: #### Creación de un Store ```typescript import { Observable, ReplaySubject, bufferCount, concat, map, skip, takeUntil } from 'rxjs'; export class CoreStore<T> { // ... // Métodos y propiedades para gestionar el historial y el estado } ``` La clase CoreStore utiliza ReplaySubject de RxJS para almacenar y emitir estados. También cuenta con funcionalidades para gestionar el historial y observar cambios en el estado. #### Establecimiento de un Nuevo Estado ```typescript observeProp<K extends keyof T>(key: string, prop: K): Observable<T[K]> { // ... return this._dataSubjects[key].pipe( skip(count < this._windowSize ? count - 1 : this._windowSize - 1), map((state) => state[prop]), // DistinctUntilChanged para evitar emisiones innecesarias distinctUntilChanged() ); } ``` La función set permite establecer un nuevo estado para una clave dada en el store. Utiliza un sujeto ReplaySubject para emitir el nuevo estado. #### Actualización Asíncrona de una Propiedad ```typescript async setProp<K extends keyof T>(key: string, prop: K, value: T[K]): Promise<void> { // ... this._dataSubjects[key].next(state); } ``` La función setProp permite actualizar de manera asíncrona una propiedad específica de un estado identificado por su clave. #### Observación de Cambios ```typescript getObservable(key: string): Observable<T> { // ... return this._dataSubjects[key].pipe( skip(count < this._windowSize ? count - 1 : this._windowSize - 1), map((state) => state) ); } ``` La función getObservable devuelve un observable que emite cambios en el estado para una clave dada. #### Uso del Store en una Aplicación El código de ejemplo en index.ts muestra cómo utilizar el CoreStore en una aplicación TypeScript. Proporciona ejemplos de establecimiento de estados, actualización de propiedades, observación de cambios y acciones basadas en eventos. ```typescript // Importaciones y configuraciones... document.addEventListener("DOMContentLoaded", async (event) => { // Configuraciones iniciales y ejemplos de uso del CoreStore... }); ``` Este código de ejemplo muestra cómo inicializar el store, establecer y actualizar estados, y observar cambios en la aplicación. ## Conclusión La implementación de un store basado en RxJS con historial proporciona una forma potente y reactiva de gestionar el estado en aplicaciones TypeScript. La programación reactiva facilita la observación de cambios y la gestión del historial, lo que mejora la eficiencia y la robustez de la aplicación. Para acceder al código completo, puedes consultar el repositorio [css-experiments](https://github.com/eurekatop/css-experiments/reactivity) en GitHub.