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);
  ...
}

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.

How to make a reactive copy of a store.

Similar Threads

Similar Threads

Similar Threads