前端 - 在使用electron + react + zustand 的场景下，请问是否可以使用某个 devtools 进行查看状态情况呢？

Question

请问，在使用electron + react + zustand 的场景下，请问是否可以使用 devtools 进行查看状态情况呢？
我们知道：如果使用Redux做状态管理，是可以使用工具：Redux DevTools 进行查看状态的。

请问：
1）react + zustand（无electron） 做状态管理，是否可以进行状态的查看管理呢？
2）如果可以，那么加上electron 技术，是否可以进行状态的查看管理呢？

Answer 1

用React + Zustand的话：

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

const useStore = create(devtools((set) => ({
  bears: 0,
  increaseBears: () => set((state) => ({ bears: state.bears + 1 }))
})))

// 2： Redux DevTools 扩展
import create from 'zustand'
import { devtools, redux } from 'zustand/middleware'

const useStore = create(devtools(store))

Electron + React + Zustand 也可以用开发者工具，但是要单独配置一下：

//  main.js 
const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })
  
  // 安装 Redux DevTools
  if (process.env.NODE_ENV === 'development') {
    const os = require('os')
    const path = require('path')
    const extensionPath = path.join(
      os.homedir(),
      '/AppData/Local/Google/Chrome/User Data/Default/Extensions/lmhkpmbekcpmknklioeibfkpmmfibljd/'
    )
    BrowserWindow.addDevToolsExtension(extensionPath)
  }
}