How to use storeon - 4 common examples

function App () {
  return h(Fragment, null,
    h('div', null, 'After refresh the page the state should be same'),
    h(Tracker1),
    h('div', { className: 'buttons' },
      h(Button1),
      h(ButtonClear)
    )
  )
}

let store = createStore([counter, logger, persistState(), devtools()])

render(
  h(StoreContext.Provider, { value: store }, h(App)),
  document.querySelector('main')
)

import {
  syncBlock,
  useRegisterIncrementDispatcher,
  initialState,
  reducer,
  ids,
  useCheckTearing,
  shallowEqual,
} from '../common';

const counter = (store) => {
  store.on('@init', () => initialState);
  store.on('dispatch', reducer);
};

const store = createStore([counter]);

const Counter = React.memo(() => {
  const { count } = useStoreon('count');
  syncBlock();
  return <div>{count}</div>;
}, shallowEqual);

const Main = () =&gt; {
  const { count, dispatch } = useStoreon('count');
  useCheckTearing();
  useRegisterIncrementDispatcher(React.useCallback(() =&gt; {
    dispatch('dispatch', { type: 'increment' });
  }, [dispatch]));
  const [localCount, localIncrement] = React.useReducer((c) =&gt; c + 1, 0);
  const normalIncrement = () =&gt; {
    dispatch('dispatch', { type: 'increment' });

const Foods = ({ title }) => {
  const [clicks, setClicks] = useState(0)
  const { dispatch, foods = [] } = useStoreon('foods')

  return (
    <div>
      <h1>{ title }</h1>
      
      <div>
        {foods.list.map(food =&gt; <p>{food}</p>)}
      </div>

      <p>{clicks}</p>
      <p>
        <button> setClicks(clicks + 1)}&gt;Add</button>
      </p>
    </div>
  )
}

const Counter = React.memo(() => {
  const { count } = useStoreon('count');
  syncBlock();
  return <div>{count}</div>;
}, shallowEqual);