subscribeToStateChanges method

dynamic subscribeToStateChanges (
  1. SubscriptionFunction fn,
  2. List<String> propertiesToSubscribe
)

to subscribe the state changes

Although we have callbacks for change events that can be used to update the UI based on particular property changes, the subscribeToStateChanges method gives you more control over the UI rendering logic and is more efficient.

How does it work?

  1. This method is controlled by the stateChanges property which can be defined in the setter methods while updating a particular property. If stateChanges is set to true, then only the subscribed functions will be called, unlike events callback which gets called every time when a property changes its value. So basically, subscribeToStateChanges provides more control over the event's callback in a way that you can define whether to update the UI or not while setting a particular property's value.
  2. You can define the properties for which you want to update the UI.
  3. It allows you to register multiple callback functions for search state updates.

Usage

This method can be used to subscribe to the state changes of the properties. A common use-case is to subscribe to a component or DOM element to a particular property or a set of properties & update the UI according to the changes. The callback function accepts an object in the following shape:

{
  [propertyName]: [Changes]
}

These are the properties that can be subscribed for the changes:

  • results
  • aggregationData
  • requestStatus
  • error
  • value
  • query
  • dataField
  • size
  • from
  • fuzziness
  • includeFields
  • excludeFields
  • sortBy
  • react
  • defaultQuery
  • customQuery

Implementation

subscribeToStateChanges(
    SubscriptionFunction fn, List<String> propertiesToSubscribe) {
  this.stateChanges.subscribe(fn, propertiesToSubscribe);
}