hjrdave / treble-gsm Goto Github PK

View Code? Open in Web Editor NEW

5.0 2.0 0.0 374 KB

A Hook-based global state management container and library for React.js apps.

Home Page: https://treblegsm.org/

License: MIT License

TypeScript 100.00%

hooks react global-state

treble-gsm's Introduction

Treble Global State Management

Treble is a Hook-based global state management container and library for React.js apps. It is inspired by a blog post by Luke Hall. Treble's goal is to provide a simple way to manage global state in your React app by providing an easy setup, little boilerplate, and a straight forward API.

Getting Started

Install Treble

npm install treble-gsm

yarn add treble-gsm

Create Treble Store

Create a Store.js file in your app. Example below.

import { createStore } from 'treble-gsm';

const Store = createStore([
    {
        action: 'updatePokemon',
        state: { pokemon: 'Mewtwo' }
    },
    {
        action: 'updatePokemonGame',
        state: { pokemonGame: 'Pokemon Red' }
    }
],/* optional parameters */);

export default Store;

Treble Container Component

Import the Treble container component and Store.js into your App.js or index.js and wrap it around the components you wish to have access to your store. Pass the Store into the Treble store prop. Your app now has global state management!

import  React  from  'react';
import  Treble  from  'treble-gsm';
import  Store  from  './_store';

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

export  default  App;

For more documentation visit the official website, get-treble-gsm.com.

treble-gsm's People

Contributors

Stargazers

Watchers

treble-gsm's Issues

Create SubscribeAPI method to make it easier to update deeply nested state

This is just in case you want to have multiple states within one state object for groups.

Possible example:
Store.updateNested(action: string, targetProp: string, dispatchValue: any)

Not sure on name.

Feature to reset entire Store to initial values with Store.resetAll method

This would be handy for scoped Stores that are used for advanced forms.

Add middleware features

Need to do more research on the benefit of this.

create middleware Check, Convert, and Call features

Add type definition

Need to makes sure conflicting store keys are handled

Need to make sure a module collision of store keys are handled.

Provide a better deep checking middleware in Reducer

Need a deep checking middleware to make sure the state is not updated if current state equals dispatchValue

Add option prop to store with the option of state persistence .

Will save state to local storage so on page refresh the state will persist.

Feature: Create Modules for 3rd party extenstions

API should look like below
const Store = createStore([],{ modules: [ someModule ] })

Feature: Better History management

There is a history.prev and history.reset built into the library right now (not documented). I dont feel like it is as robust as it should be, so I am proposing a new api for it.

example:
const { fruit, cars } = useTrebleHistory( );

//access values by index

{ fruit[0] }

Possible idea for custom subscribeAPI methods that can be set in the createStore?

Not sure how this would work or if it is even practical. Just need some thoughts.

Update Docs to 1.1.0(beta)

Need to update the docs to the newest version. There are breaking changes.

Add support for class components

Add util functions to allow support for class comps.

Feature: Add trigger feature to store.

Trigger will take a function (example: API function). This will call the function with a util function that will trigger the function in state.

Create Hub feature

Create a Hub feature so stores can be broken up in larger apps for scalability.

Fixe history object bug. Create stateID and historyID to compare values.

need to fix bug

Add scoped GSM

Add feature to allow for scoped GSM components in complex UI components.

Throw error when update action does not exist

Need to throw an error when updateStore action does not exist. This gets hard to debug when the action is mispelled or changed in the store.

Scoped Stores get duplicate modules when inheriting modules from parent

Scoped stores get duplicate modules when inheriting from Store. Need to make sure duplicates do not happen and native modules take precedence over inherited.

Change store option prop to feature prop.

Just changing name.

Reset All State Utility function

Each store state will have a feature option to disable or enable this. Not sure which way to go about this yet.

Allow for easy useEffect runs or api calls with Store.trigger

This method will be on the same order as Store.toggle but will not need the current state to function. I figured this is handy for creating a null state that can be used to trigger lifecycle functions easily.

Add callback feature to state store.

Would like to add a callback to state. Basically when ever the store is updated the specific state that is updated will do a callback function

Store action helper utility

Way to make Store actions more detectible when subscribing to the Store.

Possible api
const [StoreItems, StoreMethods, Utilities] = useTreble();

const { actions } = Utilities;

Store.update( actions.updateSomeState, 'foo );