saza-state

SAZA-STATE is a great state manager for react 18+ apps!

It save state on browser storage like redux-persist

It does not require external tools to apply changes in different tabs of the browser

It has optimized rendering.

Installation

install saza-state with npm :

``sh
npm i saza-state
`

how to use?

first need to create your store:

`javascript

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:

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

...

return(

)

...

`

useSelector

Get state data using useSelector hook:

`javascript
import { useSelector } from "saza-state";

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

`

useSazaState

useSazaState hook works like useSelector:

`javascript
import { useSazaState } from "saza-state";

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

`

useGetter

Get state data using useGetter hook:

`javascript
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 ({counter})
}

`

useAction

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


`javascript
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 (

`

useDispatch

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


`javascript
import { useDispatch } from "saza-state";

function MyComponent(){
...
const dispatch = useDispatch();
return (

`

useSetter

Access to store.setState method using useSetter hook:


`javascript
import { useSetter } from "saza-state";

function MyComponent(){
...
const setState = useSetter();
...
return (

`

useStore

Access to store method using useStore hook:

`javascript
import { useStore } from "saza-state";

function MyComponent(){
...
const store = useStore();
const { getState, setState, getAction, subscribe, unsubscribe } = store;
...
return (

`

useSetter

Access to store.setState method using useSetter hook:


`javascript
import { useSetter } from "saza-state";

function MyComponent(){
...
const setState = useSetter();
...
return (

`

useSaza

Access to state and setState method together using useSaza hook:

`javascript
import { useSaza } from "saza-state";

function MyComponent(){
...
const [darkMode,setDarkMode] = useSaza(state=>state.config.darkMode);
...
return (

``