codez.guru

Become a member
Home » Basic Guide to Zustand » Creating Your First Store with TypeScript

Creating Your First Store with TypeScript

Basic Guide to Zustandzustand

On this Page

  • TypeScript Store Structure
  • Setting State with Type Safety
  • Accessing Store Values in React
  • Best Practice Tips

On this Guide

  • Lesson 01: Introduction to Zustand and Store Basics
  • Lesson 02: Creating Your First Store with TypeScript
  • Lesson 03: Reading and Updating State in React Components
  • Lesson 04: Selectors and Optimizing Renders
  • Lesson 05: Handling Booleans, Counters, and Simple Objects
  • Lesson 06: Derived State and Computed Values
  • Lesson 07: Type Inference and store typing best practices
  • Lesson 08: Custom Hooks and Reusable State Accessors

TypeScript Store Structure

Zustand makes it easy to type your store.

Start by defining a TypeScript interface for your store:

type BearStore = {
  bears: number;
  increase: () => void;
  reset: () => void;
};

Now use it in create():

import { create } from 'zustand';

const useBearStore = create<bearstore>((set) =&gt; ({
  bears: 0,
  increase: () =&gt; set((state) =&gt; ({ bears: state.bears + 1 })),
  reset: () =&gt; set({ bears: 0 }),
}));

Accessing Store Values in React

In a component, use Zustand hooks like this:

function Controls() {
  const { increase, reset } = useBearStore();
  return (
    &lt;&gt;
      <button onclick="{increase}">+1</button>
      <button onclick="{reset}">Reset</button>
    &gt;
  );
}

function BearCounter() {
  const bears = useBearStore((state) =&gt; state.bears);
  return <h2>{bears} bears around</h2>;
}

You get:

  • Full type safety
  • Autocomplete in VSCode
  • No boilerplate

Best Practice Tips

✅ Always define a type or interface for your store
✅ Avoid any — Zustand supports generics cleanly
✅ Use function signatures (() =&gt; void) for actions
✅ Use arrow functions inside set() to access previous state

Summary

  • Zustand integrates cleanly with TypeScript
  • Define a type, then pass it to create<yourtype>()
  • Typed actions make your app safer and easier to maintain

Next: Lesson 03 – Reading and Updating State in React Components