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 a 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>(0, 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();