@composi/datastore:

setState

Gestionar el Estado del DataStore

Pusiste los datos en un dataStore, pero ya necesitas una forma de actualizar o cambiar esos datos durante el tiempo de vida de la aplicación. Esto se realiza usando el método setState. Esto se usa de dos maneras: pasando un objeto que se fusionará con el objeto de estado, o usando un callback.

Pasar un Objeto a setState

Como mencionamos, puedes actualizar el estado de dataStore por pasar un objeto al método setState. Date cuenta que esto solo puede hacerse cuando el estado del dataStore es un objeto. Es posible que un estado del dataStore sea un tipo primitivo o una matriz. En esos casos esto no funcionará. Tendrías que usar un callback en su lugar, el cual se explicará adelante..

dataStore.setState({
  nombre: 'Juan Alvarez Romero'
})

El código anterior puede hacer una de dos cosas. En el caso de que la propiedad "nombre" no existe en el estado del dataStore, se agregará. Si ya tiene un la propiedad "nombre" pero con con valor diferente, resultará cambiando a "Juan Alvarez Romero".

Esta es una forma muy sencilla de actualizar un objeto de estado. Sin embargo, recomendamos encarecidamente que uses un callback para modificar el estado del dataStore. Te da más control y es más explícito en cuanto a lo que está sucediendo.

setState con Callback

Puede actualizar el estado de un almacén de datos utilizando un callback. Cuando lo hagas, el argumento del callback será el estado anterior del dataStore. Por lo general, nos referimos a esto como estadoPrevio en nuestro código. Pero puedes usar el nomber que desee para eso, incluso prevState para inglés.

Cuando utilizas un callback, realizas las acciones necesarias en el estado anterior. Cuando hayas terminado, tienes que devolver el estado anterior. Si no lo haces, el estado del dataStore no se actualizará y ninguno de sus eventos se activará. Eso significa que, si tienes un método setState para cambiar el estado de un dataStore y no ocurre nada, verifica si devolviste estadoPrevio al final.

dataStore.setState(estadoPrevio => {
  // El estado es una matriz:
  estadoPrevio.push({
    clave: 109,
    valor: 'Melón',
    precio: 12,50
  })
  // No olvides de regresa el estado previo:
  return estadoPrevio
})
dataStore.setState(estadoPrevio => {
  // Aquí el estado es un objeto con una matriz de frutas:
  estadoPrevio.frutas.push({
    clave: 109,
    valor: 'Melón',
    precios: 12,50
  })
  // No olvides de regresa el estado previo:
  return estadoPrevio
})
dataStore.setState(estadoPrevio => {
  // Eliminamos un ítem por medio de filtrarlo de la matriz:
  const newState = estadoPrevio.filter(fruit => fruit.value !== 'Lemon')
  // No olvides de regresa el estado previo:
  return newState
})

setState para los Objetos

Puedes tambiń usar un callback en setState para actualizar un objeto. Las propiedades del objeto estarán disponibles en el estadoPrevio:

dataStore.setState(estadoPrevio => {
  estadoPrevio.nombre = 'Pablo'
  estadoPrevio.apellido = 'Hernandez Garza'
  estadoPrevio.actualizado = new Date().getTime()
  // No olvides de regresa el estado previo:
  return estadoPrevio
})

estadoPrevio

Cuando usamos setState podemos referir a los datos que dispone con el término estadoPrevio. Esto es solo una convención. Puedes usar cualquier término que quieres para ese valor: foo, zapato, etc. Puesdes usar el término que mejor sirve para tu lenguage:

// el chino simplificado:
const 参考 = {}
参考.钥 = 105
参考.值 = '蕉'

const 数据缓存 = new DataStore({水果: [
  { 钥: 101, 值: '苹' },
  { 钥: 102, 值: '橙' }
]})

数据缓存.setState(旧数据 => {
  const 项目 = 参考.值
  旧数据.水果.push({
    钥: 参考.钥++,
    值: 项目
  })
  return 旧数据
})

// Español:
const almacén = new DataStore({frutos: [
  { clave: 101, valor: 'manzanas' }
  { clave: 102, valor: 'naranjas' }
]})
const referencias = {}
referencias.clave = 105
referencias.valor = 'plátanos'
almacén.setState(estadoPrevio => {
  const ítem = referencias.valor
  estadoPrevio.push({
    clave: referencias.clave++
    valor: ítem
  })
  return estadoPrevio
}