Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🚀Migrating to v0.7.x #111

Open
yezyilomo opened this issue Feb 4, 2022 · 1 comment
Open

🚀Migrating to v0.7.x #111

yezyilomo opened this issue Feb 4, 2022 · 1 comment

Comments

@yezyilomo
Copy link
Owner

New Features

  • Added the ability to create a store

    import {createStore} from 'state-pool';
    
    const store = createStore();
    // You can create as many stores as you want
  • Integrated useState and useReducer into a store, this allows us to consume our state with store.useState & store.useReducer

  • Introduced a generic API for implementing state persistence in any storage

    store.persist({
        saveState: function(key, value, isInitialSet){/*your code to save state */},
        loadState: function(key){/*your code to load state */},
        removeState: function(key){/*your code to remove state */},
        clear: function(){/*your code to clear storage */}
    })
  • Introduced state typing

    store.setState<T>(key, initialVal)
    store.useState<T>(key)
    store.useReducer<T>(reducer, key)
    
    createGlobalState<T>(initialVal)
    useGlobalState<T>(globalState)
    useGlobalStateReducer<T>(reducer, globalState)
  • Managing state outside react component(reading and writing state outside react component)

    // Reading state outside of React component
    store.getState(key).getValue()  // Reading value of a global state from a store
    globalState.getValue()  // Reading value of a global state
    
    // Listening to store changes
    const unsubscribe = store.subscribe(function(key: String, value: Any){
        // key is the key for a global state that has changed 
        // value is the new value of a global state
    })
    
    // You can unsubscribe by calling the result
    unsubscribe();
    
    //If you want to listen to a single global state in a store you can use 
    const unsubscribe = store.getState(key).subscribe(function(value){
        // value is the new value of a global state
    })
    
    // For a plain global state
    const unsubscribe = globalState.subscribe(function(value){
        // value is the new value of a global state
    })
    
    // You can unsubscribe by calling the result
    unsubscribe();
    
    
    // Writing to a global state in a store 
    store.getState(key).updateValue(value => {
        // Do your updates here e.g value.name = "Yezy"
    })
    
    // Writing to a plain global state
    globalState.updateValue(value => {
        // Do your updates here e.g value.name = "Yezy"
    })

Breaking Changes

  • We can no longer import a store from state-pool, we need to import createStore instead.
  • We can no longer pass a key parameter, persist and default configurations in useGlobalState and useGlobalStateReducer hooks, The key parameter, persist and default configurations are now accepted by store.useState and store.useReducer
  • store.LOCAL_STORAGE_UPDATE_DEBOUNCE_TIME is no longer used, since we have empowered users to implement state persistence by themselves
  • useLocalState is removed, since our focus is on managing global state
@yezyilomo yezyilomo pinned this issue Feb 4, 2022
@yezyilomo yezyilomo changed the title 🚀Migrating to v0.7.0 🚀Migrating to v0.7.x Feb 6, 2022
@yezyilomo
Copy link
Owner Author

yezyilomo commented Mar 9, 2022

Live examples for v0.7.x HERE

Code for examples HERE

@yezyilomo yezyilomo unpinned this issue Mar 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant