SolidJS•3mo ago

How to make a reactive copy of a store.

I have an application where I am modifying the configuration for a device. The configuration is maintained in a store and provided via context to the app. What I want to do is make a copy of part of the store (the portion that represents the configuration) of the device and use it as the reactive source for a configuration page. The idea here being I want to copy the current configuration and then let the user modify the copy via reactive controls before applying the configuration to the device via a save button. Here is what I have tried to do:

export const ConfigPage: Component<{device: Device}> = (props) => {
  const config = props.device.config; 
  const [configCopy, setConfigCopy] = createStore<Config>(config);
  ...
}

export const ConfigPage: Component<{device: Device}> = (props) => {
  const config = props.device.config; 
  const [configCopy, setConfigCopy] = createStore<Config>(config);
  ...
}

My intention was to intentionally break the reactivity through prop drilling, however that doesn't seem to work. When I modify the copy it also modifies the original. Has anyone ever done something similar to what I am trying to do? Any help or ideas would be very much appreciated.

2 Replies

REEEEE•3mo ago

You'd have to make an actual copy of it via spreading,stringify and parsing, or structuredClone

Pseudotronics•3mo ago

Thanks ill give that a try Using const [configCopy, setConfigCopy] = createStore<Config>(structuredClone(unwrap(props.device.config))); seems to do the trick! Thanks again.

Gaming

Programming

How to make a reactive copy of a store.