Nevermore: a Poet's Mantra

    mini-rx-store
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.0 • Public • Published

    MiniRx - RxJS Redux Store - Logo

    NPM Downloads MIT License Tests All Contributors styled with prettier

    MiniRx Store

    MiniRx Store provides Reactive State Management for JavaScript and TypeScript applications. It is a global, application-wide solution to manage state and is powered by RxJS. MiniRx will help you to manage state at large scale (with the Redux pattern), but it also offers a simple form of state management: Feature Stores.

    What's Included

    • RxJS powered global state management
    • State and Actions are exposed as RxJS Observable
    • Store (Redux API):
      • Actions
      • Reducers
      • Meta Reducers
      • Memoized Selectors
      • Effects
      • Support for ts-action: Create and consume actions with as little boilerplate as possible
    • FeatureStore: Update state without actions and reducers:
      • setState() update the feature state
      • select() read feature state
      • effect() run side effects like API calls and update feature state
      • undo() easily undo setState actions
      • get state() imperatively get the current feature state
    • Extensions:
      • Redux Dev Tools Extension: Inspect State with the Redux Dev Tools
      • Immutable Extension: Enforce immutability
      • Undo Extension: Undo dispatched Actions
      • Logger Extension: console.log the current action and updated state
    • Framework agnostic: MiniRx works with any front-end project built with JavaScript or TypeScript (Angular, Svelte, React, Vue, or anything else)
    • TypeScript support: The MiniRx API comes with TypeScript type definitions
    • Angular Integration: Use MiniRx Store the Angular way: StoreModule.forRoot(), StoreModule.forFeature(), ...

    Key Concepts

    • The store is a single object which holds the global application state. It is the "single source of truth"
    • State is exposed as RxJS Observable
    • State has a flat hierarchy and is divided into "feature states" (also called "slices" in Redux world)
    • For each "feature state" we can decide to use the Redux API with actions and a reducer or the Feature Store API with setState
    • State is read-only (immutable) and can only be changed by dispatching actions (Redux API) or by using setState (Feature Store API)

    Installation

    Install from the NPM repository using npm:

    npm install mini-rx-store
    

    Install the RxJS peer dependency:

    npm install rxjs
    

    Basic Tutorial

    Let's dive into some code to see MiniRx in action

    Store (Redux API)

    MiniRx supports the classic Redux API with registering reducers and dispatching actions. Observable state can be selected with memoized selectors.

    import {
      Action,
      Store,
      configureStore,
      createFeatureSelector,
      createSelector
    } from 'mini-rx-store';
    import { Observable } from 'rxjs';
    
    // 1.) State interface
    interface CounterState {
      count: number;
    }
    
    // 2.) Initial state
    const counterInitialState: CounterState = {
      count: 1
    };
    
    // 3.) Reducer
    function counterReducer(
      state: CounterState = counterInitialState,
      action: Action
    ): CounterState {
      switch (action.type) {
        case 'inc':
          return {
            ...state,
            count: state.count + 1
          };
        default:
          return state;
      }
    }
    
    // 4.) Get hold of the store instance and register root reducers
    const store: Store = configureStore({
      reducers: {
        counter: counterReducer
      }
    });
    
    // 5.) Create memoized selectors
    const getCounterFeatureState = createFeatureSelector<CounterState>('counter');
    const getCount = createSelector(
      getCounterFeatureState,
      state => state.count
    );
    
    // 6.) Select state as RxJS Observable
    const count$: Observable<number> = store.select(getCount);
    count$.subscribe(count => console.log('count:', count));
    
    // 7.) Dispatch an action
    store.dispatch({ type: 'inc' });
    
    // OUTPUT: count: 1
    // OUTPUT: count: 2

    Feature Store API

    FeatureStore allows us to manage feature state without actions and reducers. The API of a FeatureStore is optimized to select and update a feature state directly with a minimum of boilerplate.

    import { FeatureStore } from 'mini-rx-store';
    import { Observable } from 'rxjs';
    
    // 1.) State interface
    interface CounterState {
      count: number;
    }
    
    // 2.) Initial state
    const counterInitialState: CounterState = {
      count: 11
    };
    
    export class CounterFeatureStore extends FeatureStore<CounterState> {
      // Select state as RxJS Observable
      count$: Observable<number> = this.select(state => state.count);
    
      constructor() {
        super('counterFs', counterInitialState);
      }
    
      // Update state with `setState`
      inc() {
        this.setState(state => ({ ...state, count: state.count + 1 }));
      }
    }

    Use the "counterFs" feature store like this:

    import { CounterFeatureStore } from "./counter-feature-store";
    
    const counterFs = new CounterFeatureStore();
    counterFs.count$.subscribe(count => console.log('count:', count));
    counterFs.inc();
    
    // OUTPUT: count: 11
    // OUTPUT: count: 12

    The state of a Feature Store becomes part of the global state

    Every new Feature Store will show up in the global state with the corresponding feature key (e.g. 'counterFs').

    store.select(state => state).subscribe(console.log);
    
    //OUTPUT: {"counter":{"count":2},"counterFs":{"count":12}}

    Play with the basic tutorial on Stackblitz: MiniRx Store - Basic Tutorial

    Demos and examples:

    Demos with working example:

    These popular Angular demo applications show the power of MiniRx:

    More about MiniRx:

    Blog Posts:

    References

    These projects, articles and courses helped and inspired us to create MiniRx:

    License

    MIT

    Contributors

    Thanks goes to these wonderful people (emoji key):


    Pieter Van Poyer

    💻

    Florian Spier

    💻 🤔

    Carsten

    🎨

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Install

    npm i mini-rx-store

    DownloadsWeekly Downloads

    63

    Version

    3.1.0

    License

    MIT

    Unpacked Size

    548 kB

    Total Files

    55

    Last publish

    Collaborators

    • spierala