# Application State

Flow RDF uses a state object as the single source of truth (opens new window) of application state. The state object is provided by the StateStore class. The state object is as a set of nested application state properties, designed by the developer to meet the requirements of the application being developed.

The state object is a singleton available from the Flo.w RDF context. See Using Flo.w RDF for details of how to initialize Flo.w RDF and instantiate a Flo.w RDF context in your project.

Flo.w RDF Web Components can access the application state singleton to update and display state properties, and react to property changes.

# Application State Property Types

Any JavaScript type can be stored in application state, including:

Strings
Numbers
Boolean values
Arrays
Objects

Application state can also includes two special types:

Computed properties - properties computed from other state properties.
Flo.w RDF reactive queries - Flo.w dataset queries and their results.

# Accessing Application State

Application state can be accessed in Flo.w RDF Reactive Expressions using the $propName syntax. Member access can also be used to access nested properties: $propName.subProp.

For example, to bind the value of the application state property myValue to a Gauge component:

<flow-gauge heading="My Gauge" value=$myValue></flow-gauge>

# Updating Application State

Application state can be declaratively bound to UI input controls, including:

Timer
Checkbox Group
Radio Group
FAB Group
List Items (checkbox-type and radio-type)

For example, to bind the mapLayers property to a checkbox group:

<flow-checkbox-group selection-state="$mapLayers">
  <flow-checkbox value="layer1">Layer 1</flow-checkbox>
  <flow-checkbox value="layer2">Layer 2</flow-checkbox>
  <flow-checkbox value="layer3">Layer 3</flow-checkbox>
  <flow-checkbox value="layer4">Layer 4</flow-checkbox>
</flow-checkbox-group>

Application state can also be updated programmatically using the following StateStore methods:

StateStore.set() - set a single property.
StateStore.merge() - set multiple properties.
StateStore.increment() - increment a numeric property.
StateStore.decrement() - decrement a numeric property.
StateStore.toggle() - toggle a boolean property.

# Computed Properties

Computed properties are application state properties that are computed from other state properties. They often used to transform data or prepare other state properties for binding to a reactive UI component such as Gauges or Map Data Sources.

Computed properties are re-evaluated and cached when their input properties change. Flo.w RDF's reactivity system automatically determines the order of evaluation and ensures that computed properties are only re-evaluated when necessary.

To register a computed property, use the compute method of the StateStore class.

An example computed property registration:

// Register computed property 'exampleProp' using 'prop1' and 'prop2' as inputs.
context.state.compute('exampleProp', state => {
  return (state.prop1 + state.prop2) * 10;
});

Accessing computed properties

When accessing computed properties in JavaScript functions use state.propName.get().

# Serializing Application State

Application state can be serialized to and deserialized from the browser address bar URL. This supports deep-linking into Flo.w RDF applications and link sharing.

Use the StateStore.serialize() method to provide a serialization and deserialization function for transforming application state to/from URL query string property/value pairs.

← Introduction Reactivity →