Store

Package provides simple implementation of "store".

Store - is a subscribable state container. It means you can:

get value from store;
set value to store;
subscribe to value change.

It useful for experiments and tests and also in cases when you need to something simple to work with.

Usage

import { createStore } from '@krutoo/utils/store';

const counter = createStore(0);

// get current value:
counter.get();

// set value:
counter.set(12);

// add listener:
const unsubscribe = counter.subscribe(() => {
  console.log(`Actual count is ${count.get()}`);
});

// remove listener:
unsubscribe();

React

In React synchronizing UI state with store can be achieved with useSyncExternalStore:

import { useSyncExternalStore } from 'react';
import { createStore } from '@krutoo/utils/store';

const counter = createStore(0);

function App() {
  const count = useSyncExternalStore(store.subscribe, store.get);

  return (
    <>
      Count: {count}
      <button onClick={() => counter.set(count - 1)}>-</button>
      <button onClick={() => counter.set(count + 1)}>+</button>
    </>
  );
}