Installation

npm i saza-state

how to use?

first need to create your store:

const counter = {
    label:'counter',
    initialValue:0,
    storagble:false, // dont save on localstorage
    actions:{
        increment:(counter)=>{
            return counter+1;
        },
        decrement:(counter)=>{
            return counter-1;
        },
        set:(counter,payload)=>{
            return payload;
        },
        default:(counter)=>{
            return counter || 0;
        }
    }
}

const config = {
    label:'config',
    initialValue:{
        darkMode:ralse,
    },
    storagble:true, // config will saved on storage
    actions:{
        toggleDarkMode:(config)=>{
            return {
                ...config,
                darkMode:!config.darkMode
            }
        },
        set:(config,newConfig)=>{
            return {
                ...config,
                ...newConfig,
            };
        },
        default:(config)=>{
            return config || {
                darkMode:false,
            };
        }
    }
}

const store = createStore({
    counter,
    config,
});'

export default store;

SazaProvider

wrapp your app with SazaProvider:

import { SazaProvider } from "saza-state";
import store from "./store";

...

return(<SazaProvider store={store}>
   <App />
</SazaProvider>)

...

useSelector

Get state data using useSelector hook:

import { useSelector } from "saza-state";

function MyComponent(){
    const counter = useSelector(state=>state.counter) || 0;
    return (<span>{counter}</span>)
}

useSazaState

useSazaState hook works like useSelector:

import { useSazaState } from "saza-state";

function MyComponent(){
    const counter = useSazaState(state=>state.counter) || 0;
    return (<span>{counter}</span>)
}

useGetter

Get state data using useGetter hook:

import { useGetter } from "saza-state";

function MyComponent(){
    const counter = useGetter('counter') || 0; // counter is label of counter in store
    const { darkMode } = useGetter(state=>state.config); // also you can pass a selector

    return (<span style={getStyle(darkMode)}>{counter}</span>)
}

useAction

Update state data using actions and get action using useAction hook:

import { useAction } from "saza-state";

function MyComponent(){
    const { increment, decrement } = useAction(action=>action.counter); // actions created on store.js file
    const { toggleDarkMode } = useAction('config'); // get actions with label/actionSelector of state

    return (<div>
        <button onClick={decrement}>-</button>
        counter: {counter}
        <button onClick={increment}>+</button>

        <button onClick={toggleDarkMode}>toggle darkmode</button>
    </div>);

useDispatch

Update state data using dispatch method. get dispatch using useDispatch hook:

import { useDispatch } from "saza-state";

function MyComponent(){
    ...
    const dispatch = useDispatch();
    return (<div>
        <button onClick={()=>dispatch('counter.decrement')}>-</button>
        counter: {counter}
        <button onClick={()=>dispatch('counter.increment')}>+</button>

        <button onClick={()=>dispatch({ // if it's needed to pass a value for action use payload property
            type:'config.set',
            payload:{
                darkMode:false,
            }
        })}>toggle darkmode</button>
    </div>);

useSetter

Access to store.setState method using useSetter hook:

import { useSetter } from "saza-state";

function MyComponent(){
    ...
    const setState = useSetter();
    ...
    return (<div>
        <button onClick={()=>setState({
            counter:counter-1
        })}>-</button>
        counter: {counter}
        <button onClick={()=>setState({
            counter:counter+1
        })}>+</button>

        <button onClick={()=>setState({
            type:'config.set',
            config:{
                ...config,
                darkMode:!config.darkMode,
            }
        })}>toggle darkmode</button>
    </div>);

useStore

Access to store method using useStore hook:

import { useStore } from "saza-state";

function MyComponent(){
    ...
    const store = useStore();
    const { getState, setState, getAction, subscribe, unsubscribe } = store;
    ...
    return (<div>
        <button onClick={()=>setState({
            counter:getState().counter-1
        })}>-</button>
        counter: {getState().counter}
        <button onClick={()=>setState({
            counter:getState().counter+1
        })}>+</button>

        <button onClick={()=>setState({
            type:'config.set',
            config:{
                darkMode:!getState().config.darkMode,
            }
        })}>toggle darkmode</button>
    </div>);

useSetter

Access to store.setState method using useSetter hook:

import { useSetter } from "saza-state";

function MyComponent(){
    ...
    const setState = useSetter();
    ...
    return (<div>
        <button onClick={()=>setState({
            counter:counter-1
        })}>-</button>
        counter: {counter}
        <button onClick={()=>setState({
            counter:counter+1
        })}>+</button>

        <button onClick={()=>setState({
            type:'config.set',
            config:{
                ...config,
                darkMode:!config.darkMode,
            }
        })}>toggle darkmode</button>
    </div>);

useSaza

Access to state and setState method together using useSaza hook:

import { useSaza } from "saza-state";

function MyComponent(){
    ...
    const [darkMode,setDarkMode] = useSaza(state=>state.config.darkMode);
    ...
    return (<div style={getStyle(darkMode)}>
        <button onClick={()=>setDarkMode(darkMode=>!darkMode)}>toggle darkmode</button>
    </div>);