开发工具集成

devtoolsPage.setup.title

devtoolsPage.setup.description

import { create } from 'zustand'
import { devtools } from 'zustand/middleware'

const useStore = create(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set(
        (state) => ({ count: state.count + 1 }),
        false,
        'increment' // action name for devtools
      ),
    }),
    { name: 'MyStore' } // store name in devtools
  )
)

devtoolsPage.naming.title

devtoolsPage.naming.description

const useStore = create(
  devtools(
    (set) => ({
      bears: 0,
      fish: 0,
      addBear: () => set(
        (state) => ({ bears: state.bears + 1 }),
        false,
        'bears/add'  // action type
      ),
      addFish: () => set(
        (state) => ({ fish: state.fish + 1 }),
        false,
        { type: 'fish/add', qty: 1 }  // action with payload
      ),
    }),
    { name: 'AnimalStore' }
  )
)

devtoolsPage.configOptions.title

devtools(
  (set) => ({ ... }),
  {
    name: 'MyStore',           // Name shown in Redux DevTools
    enabled: true,             // Enable/disable devtools (default: true in dev)
    anonymousActionType: 'anonymous', // Default action name
    serialize: {               // Custom serialization
      options: {
        map: true,
        set: true,
      },
    },
  }
)

devtoolsPage.combining.title

devtoolsPage.combining.description

import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'

const useStore = create(
  devtools(
    persist(
      (set) => ({
        count: 0,
        increment: () => set(
          (state) => ({ count: state.count + 1 }),
          false,
          'increment'
        ),
      }),
      { name: 'counter-storage' }
    ),
    { name: 'CounterStore' }
  )
)

devtoolsPage.production.title

devtoolsPage.production.description

const useStore = create(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    }),
    { 
      name: 'MyStore',
      enabled: process.env.NODE_ENV === 'development',
    }
  )
)