Observer

Listens to changes on an observable value and propagates changes to the underlying components.

Examples

Contents

UsageAPIs

Usage

Update sections of a component when a value changes using an observer.

Leverage the observable system that we use to update only the elements that care about the value being watched.

APIs

IObservableExpression<T = any>

actionoptional
string
Using an observableExpression you can sign up for an action instead of all actions which is the default.
filteroptional
(value: ObservedArgs<T>, action: string) => boolean
filter function that determines whether or not an action should affect the state of the Observer. @param value The observable value that is being supplied for the action. @param action The action that has taken place. @returns true if the Observer should setState, false if the change should be ignored.
observableValue
T | IObservableLikeValue<T> | IObservableLikeArray<ArrayMember<T>>
The observableValue is the value being observed. When actions are fired, the filter is called and the results determine whether the component changes state.

IUncheckedObserverProps

[propNamerequired
string]: IObservableLikeValue<any> | IObservableExpression
All props that should be passed down to the child element. These properties are IObservableLikeValues, meaning that if they are observable, we will attempt to subscribe to their changes.
onUpdate
() => void
Called whenever componentDidUpdate is run by the Observer (after subscriptions have been updated). Useful in situations where you need to be notified when Observer updates happen, but don't want to insert a new component just for the lifecycle methods.

Loaded Observer page