How can I use Zustand with TypeScript?

How can I use Zustand with TypeScript?

You can use Zustand with TypeScript by defining your store with types for state and actions. Would you like a code example?

Yes, please provide a code example.

Here's a simple example:

import create from 'zustand';

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

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

This defines a store with a bears state and an increase action.

How do I use this store in a React component?

You can use the store in a React component like this:

import React from 'react';
import { useStore } from './store';

const BearCounter: React.FC = () => {
  const { bears, increase } = useStore();
  return (
    <div>
      <h1>{bears} bears around here!</h1>
      <button onClick={increase}>Increase</button>
    </div>
  );
};

This component displays the number of bears and a button to increase the count.