get-set-react/oldreadme.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.

# get-set-react
**get-set-react** is a very simple, fast and light weight state management library for react. it supports both the single and multi store architectures. This is an alternative to redux, zustand, mobx.etc. It's upto 3 times fater than immer which is used in redux toolkit. It has a great dev tools support to debug and track your state changes to improve developer experience.

```typescript
const {get, set, react, subscribe, val, reset, actions} = create({count:0});
```

## Installation

You can install get-set-react via npm:

```bash
npm install get-set-react
```

## Usage
1. create store using **create** 

```typescript
const store = create({count:0}); // supports objects, array and primitives.

// get state
store.get(); // {count:0}

// replace state using set
store.set({count:1}); // {count:1}; 

// replace state using a function so you can access previous state
store.set(prevState=>({count:prevState.count+1})); // {count:2}, make sure you return new state when setting new state unlike update.

// update portion of the state directly. it'll also create new references for the parent objects of the property that changed. 
store.update(s=>s.count++); // {count:3}; 

// use val instead of get, set, and update
store.val(); // {count:3} same as get(); 
store.val({count:4}); // same as set() if new state is passed
store.val(s=>s.count++); // same as update() if function is passed.
```
```typescript
// you can also pass actions such as get or set methods
const storeWithActions = create({ count:  0 }, (val) => ({
	incr() {
		val((s) =>  s.count++);
	},
}));

storeWithActions.actions.incr(); // {count:1}

// or you can also access actions using val
storeWithActions.val.actions.incr(); // {count:2}; 
```

2. use it in component using a custom hook **useGet** or **useVal** or **useSelector**

```typescript
const Counter = ()=>{
  const {count} = useGet(store); 
  return <button onClick={()=>{store.update(s=>s.count++)}}>{count}</button>
}
```
```typescript
// wor store with actions
const Counter = ()=>{
  const {count, incr} = useGet(storeWithActions); 
  return <button onClick={incr}>{count}</button>
}
```
3. update state using **set** or **update** or **actions** passed as a second parameter to create function. 
```typescript
const Counter = ()=>{
  const {count} = useGet(store); 
  return <button onClick={()=>store.update(s=>s.count++)}>{count}</button>
}
// you can also use set as well. 
// store.set({count:count+1}); 
```

[Check out the examples here on stackblitz: ](https://stackblitz.com/edit/vitejs-vite-fugflk?file=src%2FApp.tsx,src%2FuseGetExample.tsx,src%2FuseStoreExample.tsx,src%2FuseSelector.tsx,src%2FuseVal.tsx&terminal=dev)

### example without actions

```javascript
import { create, useGet } from  "get-set-react";
// create store
const  store = create({
	count:  0,
});
// create a setter
const  incr = ()=>{
	store.update((store) => {store.count++});
}
export  const  Counter = ()=>{
// consume store in any component you want using useGet or useVal or useSelector.
const {count} = useGet(store);
return  <button  onClick={incr}>{count}</button>
}
```
### useVal: an alternative to useGet
useVal accepts the store instance and returns a function when called with no argument returns state and when called with a value it replaces the state with that value. and when called with a function as an argument it works similar to update function. it can do what these functions 'get', 'set' and 'update' can do.

```javascript
import { create, useVal } from  "get-set-react";
// create store
const  store = create({
	count:  0,
});
// store.val(); 
// store.val({count:1}); replaces state => {count:1}
// stoer.val(s=>s.count++); updates state => {count:2}
export  const  Counter = ()=>{
// consume store in any component you want using useGet or useVal or useSelector.
	const  val = useVal(store);
	return  <button  onClick={()=>val(s=>s.count++)}>{val().count}</button>
}
```

  

### example with actions
pass a function that returns an object of methods to set or get state called actions. they have access to val function which is used to get or set state.

useGet returns an object that contains both data and actions. actions can talk to each other through 'this'

```javascript
import { create, useGet } from  "get-set-react";
const  store = create({
	count:  0,
}, (val)=>({
incr(){
	val(s=>s.count++); // {count:1}. 
}})
);

export  const  Counter = ()=>{

const {count, incr} = useGet(store);

// you can also use useStore to access the

return  <button  onClick={incr}>{count}</button>

}
// val functions similar to the return value of the useVal hook.
// val(); returns state;
// val(obj); replaces state with that object.
// val(s=>s.count++); updates the state directly.
```
  

### useSelector: an alternative to useGet to select portion of the state.

  

component will only re-render if that selected portion of the state changes.

```javascript
import { create, useGet } from  "get-set-react";

// create store
const  store = create({
    count:  0,
});

// create a setter

const  incr = ()=>{
    store.update((store) => {store.count++});
}

export  const  Counter = ()=>{
    // consume store in any component you want using useGet or useVal or useSelector.
    const  count = useSelector(store, s=>s.count);
    return  <button  onClick={incr}>{count}</button>
}

```
### reset State on unmount

there are two ways to reset your state automatically when the component that it subscribes unmounts.

1. **useGet(store, true); second parameter here is a boolean if passed as true, it'll reset state when the component is unmounted. it's recommended to use it at parent level or wherever you need. But not in every component where you use that store.

2. you can also use a seperate hook called **useReset([...stores]); you can pass collection of stores that needs to be reset upon unmount.

## why get-set-react? (ease of use and speed)

It makes state management easy for large and very complex react applications with complex state. It majorly focuses on developer experience and performance. Destructuring porition of the state to update state is difficult if it's a large object and tedious. get-set-react offers utilities to update state directly without compramising the immutability of the object. it will do all the work to keep the object immutable, you just need to change the state as you would change any javascript object. it supports the multi store architecture. meaning, changing a store / state will not have any impact on root store. Because each store is independent. it's faster than immer. it follows the guidelines of react very strictly and supports React 19. IT also provides ability to reset the state when a specific component is unmounted through 'reset' function. It offers 'react' function