@composi/datastore:

watch

Vigilar los Eventos

Los dataStores usan @composi/observer internamente para habilitar el vigilar y reaccionar a los cambios de estado. En cuanto a ti, esto significa que puedes configurar un vigilante para un dataStore para hacer algo cuando su estado cambie. El método watch toma dos argumentos: un evento que vigilar y un callback que ejecutar cuando aquel evento ocurre. Por defecto el callback recibe el estado actual del dataStore como su argumento.

Puedes usar cualquier valor de cadena de texto como el nombre del evento: actualizar, algo-pasó, etc. También puedes crear eventos que usan módulos nombrados para organizarlos mejor: empleado:agregado, empleado:promovido, empleado:despedido, etc.

DataStore tiene un evento por defecto que siempre se ejecuta cuando el estado de él cambie: dataStoreStateChanged. Así pues, puedes crear un vigilant sin evento y el dataStore usará el suyo por defecto. Haces esto por usar un valor falso para el valor del evento: null, undefined, false, '', 0.

dataStore.watch(null, () => {
  // Haz algo aquí
})
// o:
dataStore.watch('', () => {
  // Haz algo aquí
})

Estos también se operaban si mandas un evento a dataStoreStateChanged.

import { DataStore } from  @composi/datastore

const dataStore = new DataStore({
  empleados: [
    {
      id: 101,
      nombre: 'José Gutierrez Caldarón',
      job: 'cocinero'
    }
  ]
})
// Crear un vigilante con un evento personalizado:
dataStore.watch('añadir-empleado', data => {
  // Haz lo que quieres con estos datos.
})

Vigilantes Múltiples

Un dataStore puede tener cuantos vigilantes como necesario, cada uno con sus propios eventos personalizados. O, puedes configurar vigilantes múltiples que usan el mismo evento. Haz lo que sirve tu propósito.

Pueda que quieres crear vigilantes múltiples para el mismo evento para que no el vigilante no sea demasiado complicado. Si tomas este sendero, trata de mantener los vigilantes para el mismo evento en el mismo lugar. De esa manera será más fácil averiguar en dónde ocurren los errores cuando algo no funciona apropiadamente.

// Crear vigilantes múltiples con el mismo evento:
dataStore.watch('añadir-empleado', data => {
  // Haz algo aquí.
})
dataStore.watch('añadir-empleado', data => {
  // Haz otra cosa aquí.
}
dataStore.watch('añadir-empleado', data => {
  // Y aquí puedes hacer algo completamente diferente.
}

Por supuesto puedes tener vigilantes en el dataStore con eventos personalizados diferentes:

// Crear vigilantes múltiples con eventos diferentes:
dataStore.watch('empleado-contratado', data => {
  // Haz algo aquí.
})
dataStore.watch('empleado-despedido', data => {
  // Haz algo aquí.
}
dataStore.watch('empleado-promovido', data => {
  // Haz algo aquí.
}

Tener vigilantes con diferentes eventos es útil para desencadenar diferentes escenarios. Esto es posible cuando se usa el método send del dataStore.

Actualizar un Componente Funcional

DataStores proporcionan gestión de estado para los componentes funcionales. Los componentes funcionales no tienen estado. Reciben sus datos a través de props. En lugar de cambiar los datos manualmente y luego volver a renderizar el componente, puedes usar un dataStore para hacerlo. Simplemente configure un vigilage que renderizará el componente cada vez que cambie el estado del dataStore:

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

// Definir un componente de lista:
function Lista({data}) {
  return (
    <ul>
      {
        data.map(item => <li key={item.clave}>{item.valor}</li>)
      }
    </ul>
  )
}

// Crear un dataStore:
const dataStore = new DataStore([
  {
    clave: 101,
    valor: 'Manzanas'
  },
  {
    clave: 102,
    valor: 'Naranjas'
  },

  {
    clave: 103,
    valor: 'Plátanos'
  }
])

// Renderizar el componente:
render(<Lista data={dataStore.state}/>, 'body')

// Crear vigilante para actualizar el component cuando se cambia el estado:
dataStore.watch('ocurrió-actualización', data => {
  render(<Lista data={dataStore.state} />, 'body')
})

Después de crear un componente que utiliza un dataStore y después de configurar un vigilante para actualizar el componente, cuando modifiquemos el estado de aquel dataStore, el componente se actualizará automáticamente.

dataStore.setState(estadoPrevio => {
  estadoPrevio.push({
    clave: 104,
    valor: 'Melones'
  })
})