Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including rxjs-observable-store with all npm packages installed. Try it out:

require("rxjs/package.json"); // rxjs is a peer dependency. var rxjsObservableStore = require("rxjs-observable-store")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

rxjs-observable-store v2.0.4

A state management solution implemented using RxJS to mimic Redux architecture.

rxjs-observable-store

npm npm MIT licensed

A state management solution implemented using RxJS to mimic Redux architecture.

Read my blog post State management in Angular with observable store services to learn more about how to use the rxjs-observable-store package to manage state in front-end applications.

Getting started

Prerequisites:
Lowest TypeScript support starts at version 3.5.

Installation:

npm install rxjs-observable-store --save

Usage example:

import {Store} from 'rxjs-observable-store';

class ExampleState {
    exampleText = 'initial text';
    exampleObject = {
        property1: {
            nestedValue: {
                value: 1000,
            },
        },
    };
}

class ExampleStore extends Store<ExampleState> {
    constructor() {
        super(new ExampleState());
    }

    updateExampleText() {
        this.setState({
            ...this.state,
            exampleText: 'updated text',
        });
    }

    updateNestedValue() {
        this.patchState(
            2000,
            'exampleObject',
            'property1',
            'nestedValue',
            'value'
        );
    }
}

class TestComponent {
    store: ExampleStore;

    constructor() {
        this.store = new ExampleStore();

        this.store.state$.subscribe(state => {
            console.log(state);
        });

        setTimeout(() => {
            this.store.updateExampleText();
        }, 1000);

        setTimeout(() => {
            this.store.updateNestedValue();
        }, 2000);
    }
}

API

Store's public properties:

state: <S>
Current state snapshot.

state$: Observable<S>
RxJS Observable of state.

Store's public methods:

setState(nextState: S): void
Set store's state to nextState.

patchState(value: any, ...path: (string|number|symbol)[]): void
Set store's state at path to value.
Notes:

  • When using TypeScript, errors are thrown for nonexisting path and wrong value type:
    patchState typed value
  • Path autocompletion works as well (10 levels deep):
    patchState path autocompletion
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free