@composi/datastore:

setState

Manging DataStore State

So you put data in a dataStore. You need a way to update or change that data during the lifetime of your app. You do that using the setState method. This can be used in two ways. Passing in a object that will get merged with the state object, or using a callback.

Pass Object to setState

As we mentioned, you can update the dataStores state by passing an objet to the setState method. Please not that this can only be done with the dataStore state is an object. It's possible for a dataStore state to be a primitive type or array. In those cases this approach will not work. You'd have to use a callback instead.

dataStore.setState({
  name: 'Sam Smith'
})

The above code can do either of two things. In the case that the dataStore's state doesn't have a property name, it will be added. If it already has a name with a different value, this will change it to "Sam Smith".

This is a very simple way to update a state object. However, we strongly recommend using a callback. It gives you more control and is more explicit about what is happening.

setState with Callback

You can update a dataStore's state by using a callback. When you do so, the callback's argument will be the previous state of the dataStore. We usually refer to this as prevState in our code. You could use any value you want, but prevState shows what we are dealing with more clearly.

When you do use a callback, you perform whatever actions you need to on the previous state. When you are done, you need to return the prevState. If you fail to, the dataStore's state will not get updated and none of its events will fire. That means, if you have a setState method to change a dataStore's state and nothing is happening, check if you returned prevState at the end.

dataStore.setState(prevState => {
  // Here state is an array:
  prevState.push({
    key: 109,
    value: 'Melon',
    price: 1.99
  })
  // Don't forget to return prevState:
  return prevState
})
dataStore.setState(prevState => {
  // Here state is an object with a fruits array:
  prevState.fruits.push({
    key: 109,
    value: 'Melon',
    price: 1.99
  })
  // Don't forget to return prevState:
  return prevState
})
dataStore.setState(prevState => {
  // Here we delete an item by filering it out:
  const newState = prevState.filter(fruit => fruit.value !== 'Lemon')
  // Don't forget to return newState:
  return newState
})

setState for Objects

You can also use a setState callback to update an object. The object properties will be available from the prevState value:

dataStore.setState(prevState => {
  prevState.name.first = 'Joe'
  prevState.name.last = 'Bodoni'
  prevState.updated = new Date().getTime()
  // Don't forget to return prevState:
  return prevState
})

prevState

When we use setState we refer to the data that it exposes with the term prevState. This is just a convention. You can use whatever term you want for this value: potatoe, foo, etc. If your native language is not English, you might want to use something that makes more sense for you:

// Simplified Chinese:
const 参考 = {}
参考.钥 = 105
参考.值 = '蕉'

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

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

// Spanish:
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
}