@n0n3br/rxjs-store NPM

RxJs Store

Simple javascript state management store written on top of RxJs.

Description

This is a simple store that can be used to manage state. The store works with reducers, like Redux, and exposes methods like subscribe, select, dispatch and asyncDispatch.

Getting Started

Dependencies

NodeJS

Installing

Use npm or yarn to install the libray

npm install @n0n3br/rxjs-store
yarn add @n0n3br/rxjs-store

Features

Centralized state management
Protected state (can't be mutated directly)
State mutation based on reducers and actions
subscribe method to watch and react to desired state changes
dispatch method to mutate state syncronously
asyncDispatch method to mutate state assyncronously

Usage

Create the state interface, the inicial state and the reducer

  import { Action, Store } from 'n0n3br/rxjs-store'
  interface State {
      counter: number
  }
  const initialState:State {
      counter: 0
  }
  const reducer = (state, action:Action):State => {
      switch(action.type) {
          case 'INCREMENT': return { ...state, counter: state.counter + (payload ?? 0) }
          case 'DECREMENT': return { ...state, counter: state.counter - (payload ?? 0) }
          default: return state
      }
  }

Create the store instance

const store = new Store<State>(reducer, initialState);

Subscribe to the whole store or to a single key to react to changes

// subscribe to any state change
store.subscribe((state) => console.log("state change", state));
// subscribe to a specific key change
store
  .select("counter")
  .subscribe((value) => console.log("counter value change", value));

Dispath sync or async actions to update the state

// dispatch sync action
store.dispatch({ type: "INCREMENT", payload: 0 });
// dispatch async action
// using setTimeout to simulate a promise that will be resolved after 1 second
store.asyncDispatch(
  "DECREMENT",
  () => new Promise((resolve) => setTimeout(() => resolve(5)), 1000)
);