react-smart-state

Next generation local and global state management

react-smart-state makes your state management much simple to handle.

I have looked at state management libraries like redux, atom etc and each of them takes to much code/work to create and manage, this is why I built this library.

This library also able to handle working in devoloped mode. no need to reload the application each time you change your code.

Install

npm install react-smart-state

if you are installing this in react-native you will need to also install

npm install react-native-get-random-values

import 'react-native-get-random-values' at the root

Usage

Local State

import buildState from 'react-smart-state';

const Counter = () => {
  const state = buildState({
        itemA: 0,
        item: { a: 0 },
        test: new StateItem()
}).ignore("item").bind("item.a").build();
      
  state.useEffect(() => {
    
   // console.error(state);
  }, "itemA", "item.a")
  //alert(state.item.a)
  return (
    <div>
      <label>{state.itemA} && {state.item.a} && {state.test.name} </label>
      <button onClick={() => {
        state.itemA++;
        state.item.a++;
      }}>increase</button>
    </div>
  )
}

GlobalState

import buildState from 'react-smart-state';

const state = buildState({
        itemA: 0,
        item: { a: 0 },
        test: new StateItem()
}).ignore("item").globalBuild();
const Counter = () => {
  // for all items change except ignored items
  state.hook();
  // or specify items
  state.hook("itemA","item.a");
  state.useEffect(() => {
    
   // console.error(state);
  }, "itemA", "item.a")
  //alert(state.item.a)
  return (
    <div>
      <label>{state.itemA} && {state.item.a} && {state.test.name} </label>
      <button onClick={() => {
        state.itemA++;
        state.item.a++;
      }}>increase</button>
    </div>
  )
}

BuildState Methods

Name	Descriptions
ignore	Ignore props from proxy this is usefull when you have a big or recrusive items, those could be ignored as it may slow down the application, you will still get notified when setting it but it will ignore its probs.
bind	bind prop in ignored object
build	build the local state
globalBuild	build the global state
timeout	disable settimeout by giving undefined value or specify a number in ms default is 2 ms

State additional props

Name	Descriptions
bind	bind prop in ignored object
hook	used to hook changes to a specific component
useEffect	get notify of a change

License

MIT