import create from 'flooks';

const useCounter = create((store) => ({
  count: 0,
  add() {
    const { count } = store();
    store({ count: count + 1 });
  },
  async addAsync() {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    const { add } = store();
    add();
  },
}));

function Counter() {
  const { count, add, addAsync } = useCounter();

  return (
    <div>
      <p>{count}</p>
      <button onClick={add}>+</button>
      <button onClick={addAsync}>+~ {addAsync.loading && '...'}</button>
    </div>
  );
}

// zustand, need a selector
const { nuts, honey } = useStore((state) => ({
  nuts: state.nuts,
  honey: state.honey,
}));

// flooks, no selector needed
// but also only `nuts` or `honey` update triggers re-render, it's automatic!
const { nuts, honey } = useStore();

const { a } = useStore(); // A component, update `a`
const { fn } = useStore(); // B component, only functions, no re-render

const { a } = useStore(); // A component, update `a`
const { b } = useStore(); // B component, no `a`, no re-render

const { asyncFn } = useStore(); // A component, call `asyncFn`
asyncFn(); // No `asyncFn.loading`, no extra re-render

// With normal loading solutions, even `asyncFn.loading` is not used,
// it will re-render at least twice (turn `true` then `false`).

import create from 'flooks';

const useStore = create((store) => storeData);

// For `react<=17`, you can use `create.config()` to pass
// `ReactDOM.unstable_batchedUpdates` for batch updating in async updates.
//
// create.config({ batch: ReactDOM.unstable_batchedUpdates }); // at app entry

import create from 'flooks';

const useStore = create((store) => ({
  fn() {
    const { a, b } = store(); // get store

    store({ a: a + b }); // update store by payload
    // or
    store((state) => ({ a: state.a + state.b })); // update store by function
  },
}));