Jotai dev tools UI cant find atoms if store is specified. Known bug?

[skorphil]

Hi, when i import specific store with atoms set inside it inside and Devtools see no atoms at all.

But they start to see atoms if i import completely different empty store.
And they also work if i use default store

I'm trying jotai because of native ui devtools and ease of debuging in electron and this problem is very disappointing :(

[chrisjcthomas]

This behavior is expected when working with custom stores in Jotai.

By default, <DevTools /> (and helper hooks like useAtomsDevtools) will subscribe to Jotai's default store instance. If you create a custom store via createStore() and pass it to <Provider store={myStore}>, your atoms and their values will be registered inside myStore rather than the default store.

Because <DevTools /> is still looking at the default store, it won't see any of the atoms mounted within your custom store provider.

How to resolve:

You need to pass the same custom store instance to the <DevTools /> component as a prop:

import { createStore, Provider } from 'jotai';
import { DevTools } from 'jotai-devtools';

const myStore = createStore();

const App = () => {
  return (
    <Provider store={myStore}>
      {/* Pass the same store instance here */}
      <DevTools store={myStore} />
      
      <YourAppComponents />
    </Provider>
  );
};

If you are using debug hooks instead of the <DevTools /> UI component (e.g. useAtomsDevtools), you should similarly pass the store instance in the options object:

import { useAtomsDevtools } from 'jotai-devtools/utils';

// inside your component
useAtomsDevtools('My App Name', { store: myStore });

[chrisjcthomas]

Jotai's <DevTools /> UI component subscribes to the default store by default.

If you configure your <Provider store={myStore}> to use a custom store, all your atoms are registered within that specific store instance instead. Because the DevTools component is still checking the default store, it fails to find any atoms.

To fix this, you must explicitly pass your custom store instance directly as a prop to the <DevTools /> component:

import { Provider, createStore } from 'jotai';
import { DevTools } from '@jotai/devtools';

const myCustomStore = createStore();

export default function App() {
  return (
    <Provider store={myCustomStore}>
      {/* Pass the custom store instance directly to DevTools */}
      <DevTools store={myCustomStore} />
      <MyComponents />
    </Provider>
  );
}

Similarly, if you are utilizing the hooks API to connect to devtools, ensure you pass the custom store as an option to the hook:

useAtomsDevtools("AppDevTools", { store: myCustomStore });

[skorphil]

Jotai's <DevTools /> UI component subscribes to the default store by default.

If you configure your <Provider store={myStore}> to use a custom store, all your atoms are registered within that specific store instance instead. Because the DevTools component is still checking the default store, it fails to find any atoms.

To fix this, you must explicitly pass your custom store instance directly as a prop to the <DevTools /> component:

import { Provider, createStore } from 'jotai';
import { DevTools } from '@jotai/devtools';

const myCustomStore = createStore();

export default function App() {
  return (
    <Provider store={myCustomStore}>
      {/* Pass the custom store instance directly to DevTools */}
      <DevTools store={myCustomStore} />
      <MyComponents />
    </Provider>
  );
}

Similarly, if you are utilizing the hooks API to connect to devtools, ensure you pass the custom store as an option to the hook:

useAtomsDevtools("AppDevTools", { store: myCustomStore });

Thank you, i actually made it this way but for some reason it didnt work. Will try to look more carefully later