state Function

Creates an instance that combines the functionality of both the State class and the StateGetter function, initialized with the provided initialValue.

Optionally, you can provide an onInit callback function, which is called just before the initialization process, allowing you to perform setup tasks or configure the state before it starts emitting values

@template T
The type of the state value

@param initialValue: T
The initial value of the state

@param onInit?: (state: StateType<T>) => void
An optional callback function that is executed just before the initialization of the state, allowing you to perform setup tasks or configure the state before it starts emitting values

@returns StateType<T>
A new State instance that also acts as the StateGetter function to get the current state value

API


function state<T>(initialValue: T, onInit?: (state: StateType<T>) => void): StateType<T>;

Example


import {take, filter, switchMap} from 'rxjs';
import {state, namedGroup} from '@bitfiber/rx';
 
// Creates a state that stores and emits the IDs
const currentId = state<number>(1, s => s
  // Uses a custom function for comparing values. By default, the 'equals' function is used
  .compareBy((a, b) => a === b)
  // Transmits all emitted data to the 'productReq' emitter
  .transmit(productReq));
 
// The observable of the state
const currentId$ = currentId.$;
 
// Creates a state that stores and emits the final ID
const lastId = state<number | null>(null, s => s
  // Uses '===' for comparing values. By default, the 'equals' function is used
  .compareBy('strict')
  // Forces the state not to emit a value at the time of subscription
  .useLazyEmission());
 
// Creates a state that receives transmitted 'currentId' data and performs an effect that calls an API
const productReq = state<number>(0, s => s
  // All streams created by this state will filter the data
  .manage(
    filter(id => !!(id % 2)),
  )
  // Performs a tap callback each time the state emits new filtered data
  .tap(id => {
    console.log(id);
  })
  // Performs an effect each time the state emits new filtered data
  .effect(
    switchMap(id => productsService.get(`api/product${id}`)),
  ));
 
// Creates a state that receives used IDs and logs them through an effect
const log = state<string>('', s => s
  // Runs an effect when data is received from the `currentId` state
  .receive(currentId, id => `A new id ${id} was received`)
  // Runs an effect when data is received from the `lastId` state
  .receive(lastId, id => `the last id ${id} was received`)
  // Performs an effect each time the state emits newly received logged data
  .effect(
    switchMap(log => logService.post(`api/log`, {log})),
  ));
 
// Creates a state that performs a tap callback each time data is selected
const result1 = state<[number, number]>([0, 0], s => s
  // Runs a tap callback when all data is selected from the `currentId` and `lastId` states
  .select(currentId$, lastId, (currentId, lastId) => [currentId, lastId])
  // Performs a tap callback each time the state emits new data
  .tap(range => {
    console.log(range);
  }));
 
// Creates a state that performs a tap callback each time data is selected
const result2 = state<[number, number]>([0, 0], s => s
  // Runs a tap callback when all data is selected from the `currentId` and `lastId` states
  .zip(currentId$, lastId, (currentId, lastId) => [currentId, lastId])
  // Performs a tap callback each time the state emits new data
  .tap(range => {
    console.log(range);
  }));
 
// Creates a state that records the timestamp of the last received ID
const lastIdTime = state<number | null>(null, s => s
  // Waits for the first value from the `lastId` state, then completes the stream
  .wait(lastId, lastId => new Date().getTime()));
 
// Groups all emitters and states for mass initialization and completion
const group = namedGroup({currentId, lastId, productReq, log, result1, result2});
 
// Initializes the group and all items within the group
group.initialize();
 
// Subscribes to the observable of the state
currentId$
  .pipe(take(1))
  .subscribe(id => console.log(id));
 
// Sets the state value and emits the new value to subscribers
currentId.set(2);
 
// Updates the state value and emits the new value to subscribers
currentId.update(state => state + 1);
 
// Accesses the 'lastId' state through the group and sets data
group.lastId.set(4);
 
// Gets the current state value in two ways
const id1 = currentId();
const id2 = currentId.get();
 
// Completes the group and all items within the group
group.complete();