TrebleGSM

Global State Management for React.js Apps

Simple API

No reducers and complicated boilerplate. Subscribe and update state with a simple Hook.

Optimized

Compares state agianst the previous state to prevent unnecessary re-renders.

Scalable

Organize your state into multiple Stores and subscribe as if they were one.

Middleware

Automate tasks and centralize complex state logic before state is updated.

Scoped State

Create and maintain high powered components with private global state.

Extendable

Extend TrebleGSM functionality with Treble Modules or create your own modules.

Install Package

npm install treble-gsm
yarn add treble-gsm

Create a Store

Create a file in your folder structure called Store.js. Import createStore from treble-gsm and assign it to a variable called Store. The Store variable will store an array of objects. Each object will have an action and state property. The action property will be a string that is used to tell Treble which state to update. The state property will hold the global state.


const Store = createStore([
    {
        action: 'updatePokemon',
        state: { pokemon: 'Mewtwo' }
    }
],);
                  

const App = () => {
    return (
        <Treble store={Store}>
            {/* Components */}
        </Treble>
    );
}
                    

Wrap Components with Provider

Import the Treble provider component and Store components into your App.js or Index.js. The Treble provider gives access to the Store for all children components. The provider component has a store prop that consumes the Store component. Your app now has Global state. Easy as Sugar Creme Pie!

Subscribe and Update

Import the useTreble hook into your component and get access to Store state objects and Store subscribe methods. Destructure both from the useTreble hook. Use Store.update to target the desired state in the Store by its action and dispatch the new value to the Store. Tada! That is it, you can now manage global state in your app like a boss!


const [{ pokemon }, Store] = useTreble();

Store.update(action, dispatchValue);

<p>{ pokemon } is my favorite Pokemon!</p>
//render: Mewtwo is my favorite Pokemon!

Store.update('updatePokemon', 'Pikachu')
//render: Pikachu is my favorite Pokemon!
                  
Want to Support this Project?