How to properly use atomWithBroadcast?

[paulineramos]

I'm pretty new to jotai and I'm having some issues using atomWithBroadcast.

The project I'm working on is for an embedded iframe. There's some vanilla js with a initialize function that creates the main iframe. From there we can open a modal that is actually a second iframe because it needs to take over the whole screen. Both the main and modal iframes load different routes from the same React application.

I can get the atomWithBroadcast to work if I'm only reading/writing values in one of the iframes, but when I set a value in the main iframe and try to read it in the modal iframe, the atom is re-initialized so it's always reset.

The current example is really simple and only has one component with a count. What is the best way to initialize const broadAtom = atomWithBroadcast('params', {}) in a way that it can be used in both iframes?

Is there a way to make both iframes talk with each other? Should I just have const broadAtom = atomWithBroadcast('params', {}) in a separate file and import this variable in both iframes? I currently have this working with atomWithStorage but the team is looking into using the atomWithBroadcast more.

Thank you

// main iframe

const broadAtom = atomWithBroadcast('params', {})

const MainFrame = () => {
  const params = Route.useParams();
  const setParams = useSetAtom(broadAtom)

  useEffect(() => {
    setParams((prev) => ({...prev, ...params}));
  });

  return (
    <p>params: {JSON.stringify(params)}</p>
  )
}

// modal iframe

// this is re-initialized and I can't read the `params` value set in the `main` iframe
const broadAtom = atomWithBroadcast('params', {})

const ModalFrame = () => {
  const params = useAtomValue(broadAtom)

  return (
    <p>params: {JSON.stringify(params)}</p>
  )
}