React observing

advancedSelector

advancedSelector

The advancedSelector is in preview right now. NOT recommended for production.

Overview

Returns a function that returns a read-only IObservable or writeable IObservable.

A advancedSelector is a powerful pattern that is similar to a selector, but allows you to pass parameters to the get and set callbacks of a selector. The advancedSelector() utility returns a function which can be called with user-defined parameters and returns a selector. Each unique parameter value will return the same memoized selector instance.

Definition

/**
 * Build a read only advanced selector state
 */
export function advancedSelector<T, P extends TSerializableParam>(options: TReadWriteSelectorOptionsWithParams<T, P>): TReadWriteSelectorStateWithParams<T, P>;
/**
 * Build a read and writable advanced selector state
 */
export function advancedSelector<T, P extends TSerializableParam>(options: TReadOnlySelectorOptionsWithParams<T, P>): TReadOnlySelectorStateWithParams<T, P>;

Example

1const myNumberObservable = observe(2);
2
3const myMultipliedObservable = advancedSelector({
4  get: (multiplier) => ({get}) => {
5    return get(myNumberObservable) * multiplier;
6  },
7
8  // optional set
9  set: (multiplier) => ({set}, newValue) => {
10    set(myNumberObservable, newValue / multiplier);
11  },
12});
13
14function MyComponent() {
15  // defaults to 2
16  const number = useObserverValue(myNumberObservable);
17
18  // defaults to 200
19  const multipliedNumber = useObserverValue(myMultipliedObservable(100));
20
21  return <div>...</div>;
22}
Edit this page on GitHub

Prev

selector

Next

useObserver

On this page