Redux DevTools usage?

[corysimmons]

https://valtio.pmnd.rs/docs/api/utils/devtools

import { devtools } from 'valtio/utils'

const state = proxy({ count: 0, text: 'hello' })
const unsub = devtools(state, { name: 'state name', enabled: true })

☝️ I don't understand this. I tried to use:

import { devtools } from 'valtio/utils'

const state = devtools(proxy({ count: 0, text: 'hello' }))

I expected DevTools to work but it didn't.

What is the usage for DevTools in Valtio? 🤔

[corysimmons]

I guess you literally just do devtools(state) anywhere and it initializes/works.

[ghost]

Here's how I'm doing it in my Vite / React app. If you're not in an ESM module you can replace the await with a .then(({ devtools }) => ...) but the only problem then is that Redux devtools might not display initialization/state-loading events.

export const cartState = proxy<CartState>({
  ...defaultState,
});
if (import.meta.env.DEV) {
  const { devtools } = await import("valtio/utils");
  devtools(cartState, { name: "cartState" });
}