0Pricing
React Academy · Lesson

Zustand DevTools & Testing Stores

Connect to Redux DevTools via devtools middleware and unit-test store actions directly.

Welcome

In this lesson you will connect a Zustand store to Redux DevTools for time-travel debugging and write unit tests for store actions directly.

The devtools Middleware

Wrap your store with the devtools middleware to connect it to the Redux DevTools browser extension. You can then inspect every action and state change in the DevTools timeline.
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set(s => ({ count: s.count + 1 }), false, 'increment'),
    }),
    { name: 'CounterStore' }
  )
);

All lessons in this course

  1. Creating Your First Zustand Store
  2. Selectors & Preventing Unnecessary Re-renders
  3. Persisting State with the Persist Middleware
  4. Zustand DevTools & Testing Stores
← Back to React Academy