Nacho Portion Monitor

    rxstate

    2.0.0 • Public • Published

    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

    • Rxstate has RxJS as peer dependency - don't forget to install it as well!
    • Store will always return last value to new subscribers.
    • By default, the state is updated using spread operator on new and old state (e.g. {...oldState, ...newState}). You can change that by passing combinator parameter during store creation, e.g.:
    // create combinator that always returns new state
    const combinator = (_, data) => data;
    // create store
    const store = createStore({streams, defaultState, combinator});
    • Status action and stream can be created using createStatus function. By default it'll write status as {status: 'statusText'}. Key can be changed by passing the string parameter to the function, e.g.:
    // create status with custom key
    const status = createStatus('customStatus');
    // state will be updated with {customStatus: 'statusText'}
    • Stores have .clear() method that accepts new initial state as an optional argument and dispatches new action with either provided or default state as value. If you use default combinator logic - this will reset your state to initial one.

    License

    MIT

    Install

    npm i rxstate

    DownloadsWeekly Downloads

    1

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    17.8 kB

    Total Files

    15

    Last publish

    Collaborators

    • yamalight
    • josepot