How can I integrate Zustand with TypeScript?

How can I integrate Zustand with TypeScript?

To integrate Zustand with TypeScript, you can start by defining your store's state and actions using TypeScript interfaces.

Can you show me a simple example of a Zustand store with TypeScript?

Sure! Here's a basic 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 })),
}));

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>
  );
};

What if I want to add more complex state management?

For more complex state management, you can create multiple stores or use middleware like Zustand's persist or devtools.