state-rxjs v1.0.1

State-rxjs

Convevient state management solution on top of RxJs

API

Feed state with observable data source. Produce new state each time source emits value.

 IState<S>.feed<T>(source: Source<T>, reducer: Reducer<S, T>): void;

Feed state with observable data source. Run process when source emits. Produce new state each time process emits value.

IState<S>.feed<T1, T2>(source: Source<T1>, processor: Processor<S, T1, T2>, reducer: Reducer<S, T2>): void;;

Run process when state emits. Produce new state each time process emits value.

IState<S>.feed<T>(processor: Processor<S, never, T>, reducer: Reducer<S, T>): void;

Examples

Basic counter

const counter = createState(0);

const increment = intent(mapTo(1));
const decrement = intent(mapTo(-1));
const reset = intent(mapTo(0));

const values = merge(increment, decrement, reset);

counter.feed(values, (state, value) => state + value);

counter.subscribe(log)

increment();
increment();
increment();
decrement();
reset();

// Will log sequentially: 1, 2, 3, 2, 0

Advanced counter

const initialState = {
  value: 0,
  autoIncrement: false,
  autoIncrementBy: 1,
  tickInterval: 1000,
}

const counter = createState(initialState);

const increment = intent(mapTo(1));
const decrement = intent(mapTo(-1));
const reset = intent(mapTo(initialState));
const changeTickInterval = intent();
const changeAutoIncrementValue = intent();
const toggleAutoIncrement = intent(scan(autoIncrement => !autoIncrement, false));

const values = merge(increment, decrement);

const handleAutoIncrement = state =>
  state.pipe(
    distinctUntilChanged( // watch only changes on specific state props below
      (prev, curr) => prev.autoIncrement === curr.autoIncrement && prev.tickInterval === curr.tickInterval,
    ),
    switchMap(state => state.autoIncrement
      ? interval(state.tickInterval).pipe(mapTo(state.autoIncrementBy))
      : NEVER
    ),
  );

counter.feed(values, (state, value) => ({ ...state, value }));
counter.feed(toggleAutoIncrement, (state, autoIncrement) => ({ ...state, autoIncrement }));
counter.feed(changeTickInterval, (state, tickInterval) => ({ ...state, tickInterval }));
counter.feed(changeAutoIncrementValue, (state, autoIncrementBy) => ({ ...state, autoIncrementBy }));
counter.feed(handleAutoIncrement, (state, value) => ({ ...state, value: state.value + value }));
counter.feed(reset, (_, initialState) => initialState;

counter.subscribe(render);

increment();
increment();
decrement();

toggleAutoIncrement(); // turn on auto increment
changeAutoIncrementValue(2) // add +2 to the current value on each tick 
changeTickInterval(500) // ticks are twice faster now! 

// ...later
reset(); // reset counter to its initial configuration

License

MIT