@composi/datastore:

getFromLocalStorage

Hidratar DataStore con Datos de LocalStorage

Si estás utilizando putInLocalStorage para persistir el estado de un dataStore, puedes usar getFromLocalStorage durante la recarga de la página para hidratar el dataStore con los datos guardados durante la última sesión.

getFromLocalStorage devuelve una promesa, por lo que no bloquea la ejecución del programa. Eso también significa que tendrás que usar una función then para hacer algo cosa con el resultado. Si no hay datos en localStorage, o si hay algún otro problema para recuperarlos, getFromLocalStorage lanzará un error. Esto significa que siempre debes usar una verificación condicional para ver si recibiste algunos datos antes de intentar usarlos. Para tratar con a una falla, tendrás que usar la función catch.

import { h, render } from '@composi/core'
import { DataStore } from '@composi/datastore'

// Create un dataStore vacio:
const dataStore = new DataStore()

// Tratar de hidratar el dataStore con datos de localStorage.
dataStore.getFromLocalStorage()
  .then(datos => {
    // Siempre chequeas que recibistes algo del pedido: 
    if (datos) {
      // Usas los datos para definir el estado del dataStore vacío:
      dataStore.setState(estadoPrevio => {
        estadoPrevio = datos
        return estadoPrevio
      })
    }
  })

En el ejemplo anterior, hidratamos un dataStore con lo que se encontró en localStorage. Sin embargo, si no había nada allí, es posible que vas a querer proporcionar algunos datos predeterminados. El siguiente ejemplo muestra cómo hacerlo. Introducimos un vigilante para renderizar un componente de lista. De esa manera, ya sea que el estado se establezca con datos predeterminados o datos recuperados de localStorage, el componente se renderizará. También mostramos cómo persistir los cambios en el estado del dataStore con putInLocalStorage.

import { h, render } from '@composi/core'
import { DataStore } from '@composi/datastore'

const refs = {}

// Función para generar un uuid para dataos nuevos.
function uuid() {
  return Math.random().toString(16).substring(2, 16)
}

// Datos por defecto.
const frutas = [
  {
    clave: 101,
    valor: 'Manzanas'
  },
  {
    clave: 102,
    valor: 'Naranjas'
  },
  {
    clave: 103,
    valor: 'Plátanos'
  }
]

// Crear un dataStore vacío:
const dataStore = new DataStore()

// Configurar un vigilante que renderice el componente cuando se cambio el estado:
dataStore.watch('actualizar-lista', () => {
  render(<Lista datos={dataStore.state}/>, 'section')
})

// Hidratar el dataStore con los datos de localStorage:
dataStore.getFromLocalStorage()
  .then(datos => {
    // Si hay datos recuperados de localStorage,
    // ponlos en el dataStore, lo cual activará al vigilante.
    if (datos) {
      dataStore.setState(estadoPrevio => {
        estadoPrevio = datos
        return estadoPrevio
      })
    }
  })
  // Si localStorage no tiene datos,
  // ésta es la primera vez que la página se carga.
  // En ese caos proporcionamos unos datos por defecto.
  .catch(() => {
    dataStore.setState(estadoPrevio => {
      estadoPrevio = frutas
      return estadoPrevio
    })
    dataStore.putInLocalStorage()
  })

// Definir el componente que renderiar.
function Lista({datos}) {
  const crearRefInput = input => {
    if (input)
    refs.input = input
  }
  const añadirÍtem = () => {
    const valor = refs.input && refs.input.value
    if (valor) {
      dataStore.setState(estadoPrevio => {
        estadoPrevio.push({
          clave: uuid(),
          valor
        })
        return estadoPrevio
      })
      refs.input.value = ''
      refs.input.focus()
      // Cuando se agregan datos, guárdalos en localStorage.
      dataStore.putInLocalStorage()
        .then(() => console.log('Se guardaron datos de un ítem nuevo en localStorage.'))
    } else {
      alert('Por favor de un valor antest de enviar.')
    }
  }
  function eliminarÍtem(clave) {
    dataStore.setState(estadoPrevio => {
      const state = estadoPrevio.filter(item => item.clave != clave)
      return state
    })
    // Cuando se elimina un ítem,
    // guarda el estado nuevo en localStorage.
    dataStore.putInLocalStorage()
      .then(() => console.log('Se eliminó un ítem guardado de localStorage.'))
  }
  return (
    <div>
      <p>
        <input onmount={crearRefInput} type="text"/>
        <button onclick={añadirÍtem}>Añadir</button>
      </p>
      <ul>
        {
          datos.map(item => (
            <li clave="item.clave">
              <span>{item.valor}</span>
              <button onclick={() => eliminarÍtem(item.clave)} className='eliminar-item'>X</button>
            </li>
          ))
        }
      </ul>
    </div>
  )
}