Stores, context, & reactivity

Hey crew, got another question for y'all I have the following code:

export function MemoryProvider(props: { children: JSX.Element }) {
  const audioContext = new window.AudioContext();
  const masterAnalyser = audioContext.createAnalyser();

  const [panelsStore, setPanelsStore] = createStore({
    panels: [] as PanelFunction[]
  });

  const memory = {
    audioContext,
    masterAnalyser,

    panels: panelsStore.panels, // This line is the problem
    addPanel(NewPanel: PanelFunction) {
      console.log("Adding a panel...");
      return setPanelsStore("panels", panelsStore.panels.length, () => NewPanel);
    },
    removePanel(OldPanel: PanelFunction) {
      console.log("Removing a panel...");
      return setPanelsStore("panels", panelsStore.panels.filter((panel) => panel !== OldPanel));
    },

    mousePosition: useMousePosition()
  };

  return (
    <MemoryContext.Provider value={memory}>
      {props.children}
    </MemoryContext.Provider>
  );
}

export function MemoryProvider(props: { children: JSX.Element }) {
  const audioContext = new window.AudioContext();
  const masterAnalyser = audioContext.createAnalyser();

  const [panelsStore, setPanelsStore] = createStore({
    panels: [] as PanelFunction[]
  });

  const memory = {
    audioContext,
    masterAnalyser,

    panels: panelsStore.panels, // This line is the problem
    addPanel(NewPanel: PanelFunction) {
      console.log("Adding a panel...");
      return setPanelsStore("panels", panelsStore.panels.length, () => NewPanel);
    },
    removePanel(OldPanel: PanelFunction) {
      console.log("Removing a panel...");
      return setPanelsStore("panels", panelsStore.panels.filter((panel) => panel !== OldPanel));
    },

    mousePosition: useMousePosition()
  };

  return (
    <MemoryContext.Provider value={memory}>
      {props.children}
    </MemoryContext.Provider>
  );
}

And I am getting a warning from solid lint (reactivity) stating that panelsStore.panels should be wrapped in a useEffect or used inside of JSX or else the updates will be ignored. I'm not entirely sure what to do here, because the memory object is being passed into the value for the context provider.

5 Replies

Strange•5mo ago

I should also note that adding a new panel here works fine. The new panel is created and shown to the user with no issues, and yet solid lint complains here Simply wrapping panelStore.panels in a createEffect hook does not solve the issue, because createEffect just returns null. I need my context to be able access the panels passing just the panelsStore eliminates this warning, however ideally i'd keep around those two helper functions addPanel() and removePanel(). passing in the whole store kinda defeats the purpose i could just refactor the rest of my code to remove those two helper methods if that would be the best course of action similar issue occurs when I tack on another boolean property to the store isEditingPanels and pass it directly to the memory (context value)

Tommypop•5mo ago

You're accessing the panelStore.panels getter when you create the memory object, and the getter's execution is used, in Solid, to track the access. The linter is warning you that if you did

createEffect(() => {
  console.log(memory.panels)
})

createEffect(() => {
  console.log(memory.panels)
})

, it wouldn't re-execute even when you update panelsStore To fix this, you could make panels a getter in the memory object

const memory = {
  audioContext,
  masterAnalyser,

  get panels() { return panelsStore.panels}, // This line is the problem
  addPanel(NewPanel: PanelFunction) {
    console.log("Adding a panel...");
    return setPanelsStore("panels", panelsStore.panels.length, () => NewPanel);
  },
  removePanel(OldPanel: PanelFunction) {
    console.log("Removing a panel...");
    return setPanelsStore("panels", panelsStore.panels.filter((panel) => panel !== OldPanel));
  },

  mousePosition: useMousePosition()
};

const memory = {
  audioContext,
  masterAnalyser,

  get panels() { return panelsStore.panels}, // This line is the problem
  addPanel(NewPanel: PanelFunction) {
    console.log("Adding a panel...");
    return setPanelsStore("panels", panelsStore.panels.length, () => NewPanel);
  },
  removePanel(OldPanel: PanelFunction) {
    console.log("Removing a panel...");
    return setPanelsStore("panels", panelsStore.panels.filter((panel) => panel !== OldPanel));
  },

  mousePosition: useMousePosition()
};

Strange•5mo ago

lovely! thanks!

Tommypop•5mo ago

Np!

Strange•5mo ago

this works! :partyparrot:

Gaming

Programming

Stores, context, & reactivity