get-set-react/plan.Md

A React State Management Library similar and alternative to mobx, redux.etc. it's the simplest, smallest and fastest state management library for react with dev tools support.

```typescript
const store = {
  countState: create({ count: 0 }),
  usersState: create({ users: [] }),
};

<ReactStateExplorer store={store} enabled={true}>
  <Router />
</ReactStateExplorer>;

const ReactStoreExplorer = ({ store, enabled, children }) => {
  return (
    <>
      {enabled && <div>
        <header>React State Explorer</header>
        <tabs values=["state", "logs"] />
        <div style={{display:selectedTab === "state" ? "block" : "none" }}>

        </div>
        <div style={{display:selectedTab === "logs" ? "block" : "none" }}></div>
      </div>}
      {children}
    </>
  );
};








/// without classes

const paginationState = getSet({page:0});
const next = ()=>{
    paginationState.set(s=>s.page++)
}
const prev = ()=>{
    paginationState.set(s=>s.page--);
}
///////////////working with classes and utilities

type Data = {
    page:number;
}

class Pagination{
    data:Data = {page:0};
    setters= {
        next(data:Data){
            data.page++;
        }
        prev(data:Data){
            data.page---
        }
    }
    getters={
        fetch
    }
}



class Fetch{
    isLoading=X(false);
    data  = X<Data|null>(null);
    async load(){
        this.isLoading.set(true);
        await fetch().then(data=>this.data.set(s=>s.data=data).catch(error=>this.data.set(s=>s.error=error))
    }
}




class PaginationState {
    state = S({ page:0, isLoading });
    next(){
        this.state.page++;
    }
    prev(){
        this.state.page--;
    }
}





class CountState {
    count = 0;
    incr(){
        this.count++;
    }
    decr(){
        this.count--;
    }
}
/// with getset
class CountState {
    data = x({count:0});
    incr(){
        this.data.set(v=>v.count++);
    }
    decr(){
        this.data.set(v=>v.count--);
    }
}


class State {
    count = 0;
}
class Setters {
    incr(s:State){
        s.count++;
    }
    decr(s:State){
        s.count--;
    }
}
class Getters {
    getCount(s:State){
        return s.count;
    }
}



const {count, incr, decr} = useState(CountState)

{count};

```