@composi/datastore:

• Instalación
• DataStore
• Watch
• setState
• Send
• Unwatch
• putInLocalStorage
• getFromLocalStorage

DataStore

Almacenaje de Datos

Los dataStores son para guardar datos. La clase DataStore crea un clone inmutable de los datos que se abastecen. Puesto que los dataStores habilitan la inmutabilidad de datos, no tiene sentido usar datos que no pueden ser inmutables. Nos referimos a los elementos nativos del DOM, etc.No vas a querer tener referencieas al DOM como datos debido a que éstas siempre mantienen sus valores por referencia, y no por valor.

Crear un DataStore

Tendrás que importar la clase DataStore al proyecto:

import { DataStore } from '@composi/data-store'

Con eso estás listo para crear un dataStore. La inicialización espera hasta dos argumentos: los datos que usar cómo estado y un evento personalizado opcional.

Pasas los datos que quieres usar al constructor de DataStore. Entonces pordrás acceder a los datos del dataStore desde use propiedad state:

import { DataStore } from '@composi/data-store'

const dataStore = new DataStore({nombre: 'Elena'})

const nombre = dataStore.state.nombre
// nombre tendrá el valor 'Elena'.

Puedes asignar cualquier tipo válido de dato JavaScript al estado del dataStore: null, undefined, false, number, string, array, object. En la mayoría de los casos vas a tener un objeto complejo como el estado del dataStore.

watch

Usas el método watch vigilar un evento personalizado. Watch puede incluso captar el estado acutalizado del dataStore. Tal vigilante ejecuta un callback, el cual puedes usar para cualquier fin. Para los propósitos prácticos, pueda que sea para actualizar un componente, o para persistir los datos de alguna manera.

dataStore.watch('special-event', datos => render(, 'body')
})

setState

Usas el método setState del dataStore para actualizar su estado. Cuando haces esto, el dataStore notifica a todos sus vigilantes, enviándoles el estado actualizado. Según cómo se configuraron, los vigilantes puede hacer algo con los datos, o no más reaccionar de alguna manera al evento.

Cuando usas setState, el callback recibe el estado previo que fue pasado como argumento.

dataStore.setState(estadoPrevio => {
  estadoPrevio.nombres.push('María')
  return estadoPrevio
})

send

Los dataStores no son vigilantes pasivos. Puedes mandar eventos con ellos, junto con unos datos arbitrarios para que el vigilante los use.

dataStore.send('actualizar-componente', {nombre: 'José'})

unwatch

A veces vas a querer tener un vigilante temporal del cual te puedes deshacer más tarde. Puedes realizar esto con el método unwatch del dataStore. Éste toma un argumento: el event que eliminar. Después de dejar de vigilar un evento, cualesquier vigilantes que observan ese evento ya no funcionarán.

dataStore.unwatch('temp-event')

Persistencia de Datos

DataStore no tiene manera de persistir los datos en lugar remoto. Para hacerlo, lo mejor es crear un observador para vigilar un evento espeical para la persistencia. Luego harías una conexión con el servidor remoto para conservar los datos. Para aprender a usar el observador, lee la documentación de @composi/observador.

DataStore proporciona una forma de conservar los datos localmente, utilizando el almacenamiento local (localStorage) del navegador. Para obtener más información al respecto, consulta la documentación de putInLocalStorage y getFromLocalStorage

Versiones

Cuando creas un dataSotre, tiene versión de 1. Puedes aumentar la versión con el método bumpVersion:

dataStore.version // Devuelve 1
dataStore.bumpVersion()
dataStore.version // Devuelve 2

bumpVersion siempre aumenta la versión por 1.

Cuando guardas el estado en localStorage con putInLocalStorage, también guarda la versión actual con la clave composi-store-version. Puedes acceder a esta versión al cargarse la página para ver cuál versión tenía el dataStore durante la sesión previa:

const key = localStorage.getItem('composi-datastore-version')
if (version < 10) {
  console.log('La versión del dataStore es demasiado vieja.')
}

Marca de Tiempo

Cuando guardas el estado de un dataStore por medio de putInLocalStorage, también se guardará una marca de tiempo con la clave composi-datatore-timestamp. Durante la carga de la página, puedes recuperar la marca de tiempo para ver cuándo fue la última vez que se guardó el dataStore. Si es demasiado viejo, es podrías borrar localStorage para poblarlo con datos más recientes.

// Al cargarse la página:
const tiempo = localStorage.getItem('composi-datastore-timestamp')
const tiempoActual = new Date().getTime()
// Un día en milisegundos.
const día = 1000 * 60 * 60 * 24

// Probar para ver si el tiempo tiene más de 30 días.
// Si tiene, borrar el localStorage:
if ((tiempoActual - tiempo) / día > 30) {
  // Eliminar la clave y valor del dataStore.
  localStorage.removeItem('composi-datastore')
  // O borrar el caché entero de localStorage:
  localStorage.clear()
}

Resumen

Si ya estás familiarizado con @composi/observer, tal vez habrías notado que DataStore comparte varias características: watch, send y unwatch. Esto se debe a que, internamente, DataStore utiliza un observador para vigilar los cambios y reaccionar cuando ocurren, así como la capacidad de enviar y desbloquear los eventos. Aunque estas características en los dataStores los hacen más versátiles, puede haber situaciones en las que vas a querer utilizar un observador junto con un dataStore. Eso es debido a sus diferencias. Un dataStore puede registrar eventos y vigilarlos. También puedes enviarlo al dataStore un evento particular para activarlo. Pero siempre que el estado del dataStore cambia, todos sus eventos se ejecutan. En contraste, con un observador dedicado, también puedes registrar múltiples eventos personalizados. Para los observadores, cuando envías un evento, solo ése se ejecutará.

Aunque un dataStore dispone una manera de persistir us estado en localStorage, pueda que esto sea inadecuado para tus propósitos. Si ese es el caso, considera usar @composi/idb. Éste es un envoltura de promesas sobre IndexedDB con una interfaz sencilla como localStorage.