How to make nested models with Acey, and how it works.

nested-models-acey.ts

import { Model, IModelOptions } from 'acey'

class Device extends Model {

  constructor(initialState: any, options: IOptions){
    super(initialState, options)
  }
  
  brand = (): string => this.state.brand
  serie = (): string => this.state.serie
  version = (): number => this.state.version
}

class User extends Model {

  constructor(initialState: any, options: IOptions){
    super(initialState, options);

    this.setState({ 
        device: new Device(initialState.device, this.kids()) 
    });
    /* `kids()` makes Device inherit of the connected User's actions: `save` and `store`. */
  }
  
  ID = (): string => this.state.id
  username = (): string => this.state.username  
  device = (): Device => this.state.device //returns the instanced Device Model
}

const DATA = {
  id: '458e0917-aa64-4eec-b018-1560285601e6',
  username: 'fantasim',
  device: { brand: 'apple', serie: 'iPhone 11 Pro Max', version: 7 }
}

const user = new User(DATA, { connected: true, key: 'user' })

//Right after instance
console.log(user.device()) //Device instanced class
console.log(user.username()) // 'fantasim'
console.log(user.device().brand()) // 'apple'
console.log(user.device().serie()) // 'iPhone 11 Pro Max'


//Benefits from kids
/*

  Since `kids` method passed the User's methods `store` and `save` to the Device Model,
  whenever you call one of those in the Device Model, you actually call the User's 
  `save` or `store` method.
  
  So for example, here you won't store the Device state in the local store only, 
  but the User state (including the Device one).
  
  Same with `save`, you dispatch the User state to the Acey store. (still 
  including the Device one).
  
*/
user.device().setState({ version: 10 }).save().store() 


//Model hydration. How that works?
user.hydrate({
  id: '10760e40-1d63-447c-bbd5-3f74f6e46b43',
  username: 'skily',
  device: { brand: 'google', serie: 'Pixel 2', version: 3 }
})

console.log(user.device()) //Device instanced class
console.log(user.username()) // 'skily'
console.log(user.device().brand()) // 'google'
console.log(user.device().serie()) // 'Pixel 2'


//Model state updating. How that works?
user.setState({
  id: '458e0917-aa64-4eec-b018-1560285601e6',
  username: 'fantasim',
  device: { brand: 'apple', serie: 'iPhone 11 Pro Max', version: 7 }
})

console.log(user.device()) // { id: '458e0917-aa64-4eec-b018-1560285601e6', username: 'fantasim', device: { brand: 'apple', serie: 'iPhone 11 Pro Max', version: 7 }}
console.log(user.username()) // 'fantasim'
console.log(user.device().brand()) // throw an error "brand is not a function"
console.log(user.device().serie()) // throw an error "serie is not a function"


//`hydrate` vs `setState`
/*

    1. `hydrate` updates the state with the object passed in parameter. 
        If the current Model's state contains any nested Model it will 
        hydrate it with the attached key-value.

    2. `setState` replaces the key-value with the one passed in 
        parameter.


    To conclude, If you correctly use Acey, you will never have to use hydrate.
    hydrate is used in the acey working system for a couple key features.
    For example it helps pulling the Model state stored in the 
    local store when the Model is just instanced to get the prev state version 
    of your Model without impacting the state data types if it contains a nested Model
*/