npm i use-sync-v

const asyncFn = async () => {
  const response = await fetch('https://randomuser.me/api/');
  const data = await response.json();
  return data;
};

export const UseAsyncSubVTest = () => {
  // this will subscribe this component to 'randomUser', whenever we do setAsyncFn with 'randomUser' as selector, the data will refetch
  const { data, loading, error } = useAsyncSubV('randomUser', asyncFn);

  const refetchHandler = async () => {
    // we want to modify backend data
    asyncRefetchV('randomUser', async (p) => {
      // we can set the data here for optimistic rendering (optional)
      setSyncV('randomUser', someDataForOptimisticRendering);

      // we can put function here to post / modify data in backend database
      await insertDataToRandomUserTable();

      // useAsyncSubV will automatically refetch data
    });
  };
  return (
    <div>
      {loading && <div>Loading</div>}
      {data && <div>{JSON.stringify(data)}</div>}
      {error && <div>error</div>}
      <button onClick={refetchHandler}>refetch</button>
    </div>
  );
};

// let's say we have another component that we want to use the data from 'randomUser'
export const AnotherComponent = () => {
  // access data from 'randomUser' earlier
  const { data, loading, error } = useAsyncV('randomUser');
  return (
    <div>
      {loading && <div>Loading</div>}
      {data && <div>{JSON.stringify(data)}</div>}
      {error && <div>error</div>}
      <button onClick={refetchHandler}>refetch</button>
    </div>
  );
};

export const AsyncSubTest = () => {
  const {data, loading, error} = useAsyncV('random')

  useEffect(()=>{
    // set up subscription 
    // then modify state data with 
    setAsyncV('random', dataReturnedFromSubscription)
    // this way, everytime there's a new data sent from backend, it will automatically stored to 'random' state
  },[])
}

setSyncV('counter', 0);
// create a counter state with initial value of 0
// this is not a hook, you can call the function anywhere

setSyncV('counter', (p) => p   1);
// this will increment counter state by 1

setSyncV('data', [
  {
    name: 'Irene'
  },
  {
    name: 'Irenelle'
  }
]);
// this will store an Array of Object into "data" state

setSyncV('data[0].phone_number', '010039945');
// this will add phone number field to the first object in our Array under the name Irene

getSyncV('data[0]');
// => {
//   name:'Irene',
//   phone_number:'010039945'
// }

export const CounterDisplayComponent = () => {
  const data = useSyncV('data[0]');
  // sync this component to "data[0]" state, will re render component whenever the value of "data[0]" state changes
};

setSyncV(selector:string, updates:function(previousValue) || value)
// to update the value of the state selector using an updater function or a value
// the updater function take a parameter (original state) and return a value (updated state)
// if given a value, it will replace existing value with the value

useSyncV(selector:string)
// to subscribe to the state selector, and will re render the component whenever the value change
// be specific in the selector to prevent unnecessary rerendering

useAsyncSubV(selector:string, asyncFn:function, config?:obj)
// to subscribe to backend

useAsyncV(selector:string, config?:object)
// will subscribe to the selector, and if there's no existing data, it will prepopulate it with {loading, data, error} initial state

asyncRefetchV(selector:string, asyncFn:function, config?:object)
// to fetch a data from api, save the results into the store

useAsyncV(selector:string)
// to listen to asyncData

setAsyncV(selector:string, asyncFn:function, config?:object)
//