App State

The DevCore includes a state management service that serves as a centralized state store for all the components in the application.

The state service allows arbitrary data to be centrally stored and shared between app components. One or more State stores can be created for different state.

The primary advantages of using a centralized state store is the predictable ordering of state changes and the uncoupling of components that need to share state.

State Stores

The DevCore provides the following state stores:

Name	Description
app	State data regarding the app in general
auth	User authentication data
config	Configuration data from the ioto.json5 and other config files
context	Application specific state and data

Accessing State

import {State} from '@embedthis/devcore'

let darkMode = State.app.dark

Creating a State Store

You typically should not need to create a new store and can store your application state in the State.context object.

If you do wish to create a new state store, create a state class and use the Store.add to add the store to the centralized state service.

State stores are available as properties on the State object.

import {Store, State} from '@embedthis/devcore'
class MyState {
    temp = 0
    speed: 42
    increment() {
        temp++
    }
    get speed() { return this.speed }
    set speed(v) { this.speed = v }
    async stop() {
        await database.stop()
    }
}
Store.add('my', new MyState())

console.log(State.my.temp)
State.my.stop()
console.log(State.my.speed)

The App Store

The App store holds application global state including:

Property	Description
brightMode	Current app dark/light mode
dark	True if in dark mode
display	Current active display
fullDisplay	Full set of all possible displays
manager	Reference to the app manager object
mobile	True if the app is running on a mobile device
prefers	Hash of user preferences such as the current cloud or device
schema	Device cloud schema
started	When the app session started

Auth State

The Auth state store holds authentication state including:

Property	Description
account	Account object
accountName	Account name
accountId	Account ID
auth	Authentication tokens
authenticated	Boolean set to true when the user credentials are authenticated
authorized	Boolean set to true when the user is fully logged in
email	User's login email address
ready	Set to true when the user is logged in and the app is ready to start
role	User's authenticated role
user	User object
username	User login name
userId	User ID

Config State

The Config store holds general config state including:

Property	Description
api	Backend cloud service API
cognito	Cognito config
build	App build number
profile	Execution profile (prod
name	App name
title	App display title
version	App version (x.y.z)

The Context Store

The Context store is a special store that is used to store application specific state and data, including:

Property	Description
agent	navigator.userAgent
desktop	window.innerWidth
height	window.innerWidth
inputs	Widget input form values
language	navigator.language
mobile	window.innerWidth
width	window.innerWidth

Alternatives

If you are building your own custom build of the DevCore, you can also use other state stores such as Pinia for your own state management.