Reactivity in store

import { createContext, ParentProps, useContext } from "solid-js";
import { createStore } from "solid-js/store";

const FoobarContext = createContext<{
  name: string;
  changeName: () => void;
}>();

export const FoobarProvider = (props: ParentProps<unknown>) => {
  const [store, setStore] = createStore({
    name: "Jeff",
  });

  return (
    <FoobarContext.Provider
      value={{
        ...store,
        changeName: () => {
          setStore("name", "John");
        },
      }}
    >
      {props.children}
    </FoobarContext.Provider>
  );
};

const FoobarComponent = () => {
  const { name, changeName } = useContext(FoobarContext)!;

  return (
    <>
      <p>{name}</p>
      <button onClick={changeName}>Change Name</button>
    </>
  );
};

export const Foobar = () => (
  <FoobarProvider>
    <FoobarComponent />
  </FoobarProvider>
);