devtools

devtools 中间件让你无需 Redux 即可使用 Redux DevTools 扩展。阅读有关使用用于调试的 Redux DevTools 的好处的更多信息。

¥devtools middleware lets you use Redux DevTools Extension without Redux. Read more about the benefits of using Redux DevTools for debugging.

const nextStateCreatorFn = devtools(stateCreatorFn, devtoolsOptions)

类型
¥Types
- 签名
  ¥Signature
- 变量
  ¥Mutator
参考
¥Reference
用法
¥Usage
- 调试存储
  ¥Debugging a store
- 调试基于 Slices 模式的存储
  ¥Debugging a Slices pattern based store
故障排除
¥Troubleshooting
- 仅显示一个存储
  ¥Only one store is displayed
- 操作名称标记为 'anonymous'
  ¥Action names are labeled as 'anonymous'

类型

¥Types

签名

¥Signature

devtools<T>(stateCreatorFn: StateCreator<T, [], []>, devtoolsOptions?: DevtoolsOptions): StateCreator<T, [['zustand/devtools', never]], []>

变量

¥Mutator

['zustand/devtools', never]

参考

¥Reference

`devtools(stateCreatorFn, devtoolsOptions)`

参数

¥Parameters

stateCreatorFn：以 set 函数、get 函数和 store 作为参数的函数。通常，你将返回一个包含要公开的方法的对象。
¥stateCreatorFn: A function that takes set function, get function and store as arguments. Usually, you will return an object with the methods you want to expose.
可选 devtoolsOptions：定义 Redux Devtools 选项的对象。
¥optional devtoolsOptions: An object to define Redux Devtools options.
- 可选 name：Redux DevTools 中连接的自定义标识符。
  ¥optional name: A custom identifier for the connection in the Redux DevTools.
- 可选 enabled：在开发模式下默认为 true，在生产模式下默认为 false。为此存储启用或禁用 Redux DevTools 集成。
  ¥optional enabled: Defaults to true when is on development mode, and defaults to false when is on production mode. Enables or disables the Redux DevTools integration for this store.
- 可选 anonymousActionType：默认为 anonymous。用作 Redux DevTools 中匿名突变的操作类型的字符串。
  ¥optional anonymousActionType: Defaults to anonymous. A string to use as the action type for anonymous mutations in the Redux DevTools.
- 可选 store：Redux DevTools 中存储的自定义标识符。
  ¥optional store: A custom identifier for the store in the Redux DevTools.

¥Returns

devtools 返回状态创建器函数。

¥devtools returns a state creator function.

用法

¥Usage

调试存储

¥Debugging a store

此示例向你展示了如何使用 Redux Devtools 调试存储

¥This example shows you how you can use Redux Devtools to debug a store

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

type JungleStore = {
  bears: number
  addBear: () => void
  fishes: number
  addFish: () => void
}

const useJungleStore = create<JungleStore>()(
  devtools((set) => ({
    bears: 0,
    addBear: () =>
      set((state) => ({ bears: state.bears + 1 }), undefined, 'jungle/addBear'),
    fishes: 0,
    addFish: () =>
      set(
        (state) => ({ fishes: state.fishes + 1 }),
        undefined,
        'jungle/addFish',
      ),
  })),
)

调试基于 Slices 模式的存储

¥Debugging a Slices pattern based store

此示例向你展示了如何使用 Redux Devtools 调试基于 Slices 模式的存储

¥This example shows you how you can use Redux Devtools to debug a Slices pattern based store

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

type BearSlice = {
  bears: number
  addBear: () => void
}

type FishSlice = {
  fishes: number
  addFish: () => void
}

type JungleStore = BearSlice & FishSlice

const createBearSlice: StateCreator<
  JungleStore,
  [['zustand/devtools', never]],
  [],
  BearSlice
> = (set) => ({
  bears: 0,
  addBear: () =>
    set(
      (state) => ({ bears: state.bears + 1 }),
      undefined,
      'jungle:bear/addBear',
    ),
})

const createFishSlice: StateCreator<
  JungleStore,
  [['zustand/devtools', never]],
  [],
  FishSlice
> = (set) => ({
  fishes: 0,
  addFish: () =>
    set(
      (state) => ({ fishes: state.fishes + 1 }),
      undefined,
      'jungle:fish/addFish',
    ),
})

const useJungleStore = create<JungleStore>()(
  devtools((...args) => ({
    ...createBearSlice(...args),
    ...createFishSlice(...args),
  })),
)

故障排除

¥Troubleshooting

仅显示一个存储

¥Only one store is displayed

默认情况下，Redux Devtools 一次只显示一个存储，因此为了查看其他存储，你需要使用存储选择器并选择不同的存储。

¥By default, Redux Devtools only show one store at a time, so in order to see other stores you need to use store selector and choose a different store.

所有操作名称都标记为 'anonymous'

¥All action names are labeled as 'anonymous'

如果未提供操作类型名称，则默认为 "anonymous"。你可以通过提供 anonymousActionType 参数来自定义此默认值：

¥If an action type name is not provided, it is defaulted to "anonymous". You can customize this default value by providing a anonymousActionType parameter:

例如，下一个示例没有操作类型名称：

¥For instance the next example doesn't have action type name:

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

type BearSlice = {
  bears: number
  addBear: () => void
}

type FishSlice = {
  fishes: number
  addFish: () => void
}

type JungleStore = BearSlice & FishSlice

const createBearSlice: StateCreator<
  JungleStore,
  [['zustand/devtools', never]],
  [],
  BearSlice
> = (set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
  eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
})

const createFishSlice: StateCreator<
  JungleStore,
  [['zustand/devtools', never]],
  [],
  FishSlice
> = (set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
})

const useJungleStore = create<JungleStore>()(
  devtools((...args) => ({
    ...createBearSlice(...args),
    ...createFishSlice(...args),
  })),
)

为了修复前面的示例，我们需要提供一个操作类型名称作为第三个参数。此外，为了保留替换逻辑的默认行为，第二个参数应设置为 undefined。

¥In order to fix the previous example, we need to provide an action type name as the third parameter. Additionally, to preserve the default behavior of the replacement logic, the second parameter should be set to undefined.

这是修复后的上一个示例

¥Here's the fixed previous example

import { create, StateCreator } from 'zustand'

type BearSlice = {
  bears: number
  addBear: () => void
}

type FishSlice = {
  fishes: number
  addFish: () => void
}

type JungleStore = BearSlice & FishSlice

const createBearSlice: StateCreator<
  JungleStore,
  [['zustand/devtools', never]],
  [],
  BearSlice
> = (set) => ({
  bears: 0,
  addBear: () =>
    set((state) => ({ bears: state.bears + 1 }), undefined, 'bear/addBear'),
})

const createFishSlice: StateCreator<
  JungleStore,
  [['zustand/devtools', never]],
  [],
  FishSlice
> = (set) => ({
  fishes: 0,
  addFish: () =>
    set((state) => ({ fishes: state.fishes + 1 }), undefined, 'fish/addFish'),
})

const useJungleStore = create<JungleStore>()(
  devtools((...args) => ({
    ...createBearSlice(...args),
    ...createFishSlice(...args),
  })),
)

除非你想覆盖默认替换逻辑，否则不要将第二个参数设置为 `true` 或 `false`

¥[!IMPORTANT] Do not set the second parameter to true or false unless you want to override the default replacement logic

devtools ​

类型 ​

签名 ​

变量 ​

参考 ​

devtools(stateCreatorFn, devtoolsOptions) ​

参数 ​

返回 ​

用法 ​

调试存储 ​

调试基于 Slices 模式的存储 ​

故障排除 ​

仅显示一个存储 ​

所有操作名称都标记为 'anonymous' ​