React-State-Sub

Fast and scalable state-manager for apps based on React JS. Required React 18+.

Sandbox counter demo Sandbox todos demo

Installation

npm i react-state-sub

Usage

First init your store

// store.js
import StateSub from 'react-state-sub';

const store = {
    // add your states inside the "initialState"
    // after initialization, all initial states will be defined at the top level of this store
    initialState: {
        counter: 0
    },
    
    // add your store functions, objects, primitives etc(everything you need)
    increment(){
        this.counter++;
    },

    decrement(){
        this.counter--;
    }
};

export default new StateSub(store);

Then import into your components and use

// CounterValue.jsx
import store from './store.js';

function CounterValue() {
    const counter = store('counter'); // subscribe to our "counter" state
    return <h1>Counter: {counter}</h1>;
}


// CounterMenu.jsx
import store from './store.js';

function CounterMenu() {
    return (<div>
        <button onClick={store.increment}>Increment</button>
        <button onClick={store.decrement}>Decrement</button>
    </div>);
}

That's it!

Usage for Crazy Dev

// store.js
import StateSub from 'react-state-sub';

const store = {
    initialState: {
        counter: 0
    }
    // without any methods
};

export default new StateSub(store);

// CounterValue.jsx
import store from './store.js';

function CounterValue() {
    return <h1>Counter: {store('counter')}</h1>; // Hmm, does it work? - Yes!
}


// CounterMenu.jsx
import store from './store.js';

function CounterMenu() {
    return (<div>
        <button onClick={e => store.counter++}>Increment</button>
        <button onClick={e => store.counter--}>Decrement</button>
    </div>);
}

What the... Yes, you can change your states directly!

Enjoy!