Zustand basic example

ZustandExample.tsx

import { create } from 'zustand';
import { shallow } from 'zustand/shallow';

interface BearState {
  bears: number;
  increasePopulation: () => void;
  removeAllBears: () => void;
}

const useBearStore = create<BearState>((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

function ZustandExample() {
  const bears = useBearStore((state) => state.bears);
  const increasePopulation = useBearStore((state) => state.increasePopulation);
  const removeAllBears = useBearStore((state) => state.removeAllBears);

  // alternatively you can achieve the same declarations by destructuring the store with the shallow equality check

  //   const { bears, increasePopulation, removeAllBears} = useBearStore(
  //     (state) => ({ bears: state.bears, increasePopulation: state.increasePopulation, removeAllBears: state.removeAllBears}),
  //     shallow,
  //   );

  return (
    <>
      <div>Bears: {bears}</div>
      <button onClick={increasePopulation}>Add Bear</button>
      <button onClick={removeAllBears}>Remove All Bears</button>
    </>
  );
}