min5tore v0.2.10

min5tore

Basic example

import min5tore from 'min5tore';

const [counter, useCounter] = min5tore(1);

// access the store outside React
setInterval(() => {
  counter.set(x => x + 1);
});

const App = () => {
  const { state, set } = useCounter();
  return <h1 onClick={() => set(x => x + 1)}>{state}</h1>;
};

Async value

import min5tore from 'min5tore';

const [, useTodoList] = min5tore([]);
const fetchTodos = () =>
  fetch('https://jsonplaceholder.typicode.com/todos/1').then(x => x.json());

const App = () => {
  const { state, loading, error, set } = useTodoList();
  const load = () =>
    // set function accepts promise object
    // loading prop will be true if promise is pending and false if promise is resolved or rejected
    set(fetchTodos());

  // handle error
  if (error) return <div>{error.message}</div>;

  return (
    <>
      <pre>{JSON.stringify(state)}</pre>
      <button onClick={load}>{loading ? 'Loading...' : 'Load'}</button>
    </>
  );
};

Suspense

import min5tore from 'min5tore';
import { Suspense } from 'react';

const [todoList, useTodoList] = min5tore([]);
const fetchTodos = () =>
  fetch('https://jsonplaceholder.typicode.com/todos/1').then(x => x.json());

const TodoList = () => {
  const [state, { set }] = useTodoList().wait();
  const load = () => set(fetchTodos());

  return (
    <>
      <pre>{JSON.stringify(state)}</pre>
      <button onClick={load}>Load</button>
    </>
  );
};

const App = () => {
  return (
    <Suspense fallback="Loading...">
      <TodoList />
    </Suspense>
  );
};