Reactivity

The application state object is the foundation of Flo.w RDF reactivity. Changes to state properties are tracked automatically and trigger updates to dependent entities such as:

• Reactive UI components
• Computed properties
• Reactive dataset queries

Flo.w RDF uses a dependency graph to determine the minimal set of computations and UI updates required whenever application state changes. Expensive dataset queries are only performed when necessary and map style updates are fast ensuring the responsiveness of the application.

Declarative Programming Style

Flo.w RDF reactivity enables a declarative style of programming where the developer focuses on the 'what', not the 'how' or 'when'.

Using reactive Web Components together with application state, the Flo.w RDF developer can quickly produce interactive visualizations without having to implement UI event handlers, complex control logic or deal with asynchronous operations such as Flo.w dataset queries.

Interfacing with Non-Reactive Code

Flo.w RDF also supports imperative-style programming for interfacing Flo.w RDF application state with non-reactive code such as custom UI controls or other JavaScript framework functionality.

Setting Application State

To set application state from non-reactive code use 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.

Responding to Changes

Observable Streams

To track changes to an application state property, use the StateStore.toStream() method. Subscribe to the returned observable stream to receive notification of property changes:

const subscription = context.state.toStream('myProp', false).subscribe(val => {
  console.log('myProp changed: ', val);
})

...

subscription.unsubscribe();

WARNING

Always call unsubscribe to stop notification and free resources when the stream is no longer required.

Autorun

Use the StateStore.autorun() method to run arbitrary code within a reactive context:

const disposer = context.state.autorun(state => {
  console.log('myProp changed: ', state.myProp);
})

...

disposer();

WARNING

Always call the 'disposer' function returned from StateStore.autorun() to free resources and close the reactive context.

WARNING

Use of StateStore.autorun() is a symptom of over-reliance on the imperative style of programming. Use Flo.w RDF declarative binding where possible.