No reducers and complicated boilerplate. Subscribe and update state with a simple Hook.
Compares state agianst the previous state to prevent unnecessary re-renders.
Organize your state into multiple Stores and subscribe as if they were one.
Automate tasks and centralize complex state logic before state is updated.
Create and maintain high powered components with private global state.
Extend TrebleGSM functionality with Treble Modules or create your own modules.
Install Package
npm install treble-gsmyarn add treble-gsmCreate 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!
