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-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!