state-ref Solid Connector (connectSolid)

Usage with Solid

Solid does not directly use stateRef but returns Solid's built-in reactive Signal synchronized with the stateRef state value.

You can customize it by referring to the connectSolid implementation code.

profileStore.ts

import { connectSolid } from "@stateref/connect-solid";
// ... same as React example
export const useProfileStore = connectSolid(watch);

UserComponent.tsx

import { useProfileStore } from 'profileStore';

function UserComponent() {
    const [age, setAge] = useProfileStore<number>(store => store.john.age);

    function increaseAge() {
      setAge(age => age + 1);
    }

    return (
      <button onClick={increaseAge}>
          john's age: {age()}
      </button>;
    );
}

If Signal needs to reference and modify an object from the store, the copyable function is available to assist with copyOnWrite.

import { copyable } from "state-ref";
const [profileObj, setProfileObj] = useProfileStore(stateRef => stateRef);

function handleClick() {
   setProfileObj(n => copyable(n).john.age.writeCopy(n.john.age + 1));
}

npm

• state-ref
• connect-react
• connect-preact
• connect-solid
• connect-svelte
• connect-vue
• lithent