Home

Awesome

RxState

npm MIT Build Status Coverage Status

Simple opinionated state management library based on RxJS

Installation

npm install --save rxstate rxjs

Quick start

Example code for creating a store with status and typeahead fetching action is shown below:

import fetchival from 'fetchival';
import {from} from 'rxjs';
import {map, filter, debounceTime, distinctUntilChanged, tap, flatMap} from 'rxjs/operators';
import {createStore, createAction, createStatus} from 'rxstate';

// create status action
const status = createStatus();

// create action that fetches typeahead suggestions from server
const getTypeahead = createAction();
const typeahead$ = getTypeahead.$.pipe(
  map(e => e.target.value),
  filter(q => q.length > 3),
  debounceTime(300),
  distinctUntilChanged(),
  tap(() => status('loading')),
  flatMap(q => from(fetchival(typeaheadAPI).post({q}))),
  tap(() => status('done'))
);

// create an array of action streams for store
const streams = [status.$, typeahead$];
// create store
const store = createStore({streams, defaultState: {init: true}});

// other place in code:
// subscribe for state updates
store.subscribe(state => {
  console.log(state);
  // ... handle your state here
});

// other place in code:
// trigger action
getTypeahead('keyword');

Things to keep in mind

// create combinator that always returns new state
const combinator = (_, data) => data;
// create store
const store = createStore({streams, defaultState, combinator});
// create status with custom key
const status = createStatus('customStatus');
// state will be updated with {customStatus: 'statusText'}

License

MIT