useStore in React Component

[st11x]

Hi,

I'm using Astro + React and when I export an atom from inside a component, other components that use this atom (with useStore) does not see updates.

The atom needs to be moved to an external file.

Any idea why that is so?

Thanks
Matt

[ai]

The atom needs to be moved to an external file.

This is the way how we recommend to use Nano Stores. Since we believe that you should separate logic from UI components, it means that we recommend to keep logic (atoms) in separated files.

[ai]

when I export an atom from inside a component

Can you show the component’s code?

Do you export do like this:

export const store = atom()

or do you do something like:

export const value = useStore(store)

[st11x]

It is the former. I have useStore in both the component that declared the atom as well as in the other components.

So in the component, I had

export const fromDate = atom("");
export const toDate = atom("");

export default function Filter() {
    const from = useStore(fromDate);
    const to = useStore(toDate);
}

Then I imported the fromDate and toDate in the other components. They don't work properly until I moved the two atoms to an external file.

[ai]

Strange. They should work. But maybe Astro have some hacks.

It is better to be straightforward and keep stores in separated files. Not only Nano Stores recommends it, but also Redux and many other state managers. So Astro and other too-smart bundlers will expect it.

[st11x]

Exactly my thoughts that it should work. I didn't know about the best practice to keep them separated before I ran into this problem, so was trying to figure out where I had gone wrong. The only clue to this is the codes were in a ts vs tsx file.

I have since moved the atoms into their own file.

Thanks