Comparison

import { createStore } from 'floppy-disk';
 
export const useMyStore = createStore(
  ({ set, get }) => ({
    count: 3,
    shape: 'square',
    increment: () => set((prev) => ({ count: prev.count + 1 })),
    changeShape: () => {
      const { shape } = get();
      let nextShape;
      if (shape === 'square') nextShape = 'circle';
      else if (shape === 'circle') nextShape = 'triangle';
      else nextShape = 'square';
      set({ shape: nextShape });
    },
  })
);
 
function MyComponent() {
  // Subscribe all changes
  const { count, shape } = useMyStore();
 
  // Subscribe to single slice
  const count = useMyStore('count');
  const shape = useMyStore('shape');
 
  // Subscribe to multiple slices
  const { count, shape } = useMyStore(
    (state) => [state.count, state.shape]
  );
 
  ...
}
 
// Get/set state outside component
const getShape = () => useMyStore.get().shape;
const increment = () => useMyStore.set((state) => ({ count: state.count + 1 }));

const usePokemonDetailQuery = createQuery(fetchPokemonById);
 
function PokemonDetailPage({ id }) {
  const { isLoading, data, error } = usePokemonDetailQuery({ id });
  if (error) return <div>Something went wrong</div>;
  if (isLoading) return <div>Loading...</div>;
  return (
    <main>
      <h1>{data.name}</h1>
      <PokemonAttribute id={id} />
    </main>
  );
}
 
function PokemonAttribute({ id }) {
  const { data } = usePokemonDetailQuery({ id });
  return (
    <section>
      <div>Weight: {data.weight}</div>
      <div>Height: {data.height}</div>
    </section>
  );
}
 
// Outside component
const prefetchPokemonById = ({ id }) => usePokemonDetailQuery.get({ id }).fetch();