vveisard Posts - Answer Overflow

vveisard

•Created by vveisard on 6/26/2024 in #support

Basic store example is not reactive

I'm struggling to understand why this code isn't reactive

import { createEffect, createMemo, createRoot } from "solid-js/dist/solid.js";
import {
  createStore,
  type Store,
  type SetStoreFunction,
} from "solid-js/store/dist/store.js";

interface FooWorld {
  readonly store: {
    foo: Store<FooWorldState>;
    setFoo: SetStoreFunction<FooWorldState>;
  };
}

/**
 * Bar state for a foo world.
 */
interface FooWorldState {
  bar: number;
}

namespace World {
  export function create(): FooWorld {
    return createRoot(() => {
      const [fooStore, setFooStore] = createStore<FooWorldState>({
        bar: 0,
      });

      const getBar = createMemo(() => fooStore.bar);

      createEffect(() => {
        console.log(`why don't I see this twice?`, getBar());
      });

      return {
        store: {
          foo: fooStore,
          setFoo: setFooStore,
        },
      };
    });
  }
}

const world = World.create();

setTimeout(() => {
  world.store.setFoo("bar", 1);
  console.log(`I see this!`, world.store.foo.bar);
}, 1000);

import { createEffect, createMemo, createRoot } from "solid-js/dist/solid.js";
import {
  createStore,
  type Store,
  type SetStoreFunction,
} from "solid-js/store/dist/store.js";

interface FooWorld {
  readonly store: {
    foo: Store<FooWorldState>;
    setFoo: SetStoreFunction<FooWorldState>;
  };
}

/**
 * Bar state for a foo world.
 */
interface FooWorldState {
  bar: number;
}

namespace World {
  export function create(): FooWorld {
    return createRoot(() => {
      const [fooStore, setFooStore] = createStore<FooWorldState>({
        bar: 0,
      });

      const getBar = createMemo(() => fooStore.bar);

      createEffect(() => {
        console.log(`why don't I see this twice?`, getBar());
      });

      return {
        store: {
          foo: fooStore,
          setFoo: setFooStore,
        },
      };
    });
  }
}

const world = World.create();

setTimeout(() => {
  world.store.setFoo("bar", 1);
  console.log(`I see this!`, world.store.foo.bar);
}, 1000);

I expect the createEffect to run twice, but it only runs once. What am I missing here?

6 replies

SSolidJS

•Created by vveisard on 3/3/2024 in #support

How do I use solid for reactivity without a build step?

I like solid as a frontend library, and I want to use it as a "vanilla" state management library for reactivity. However, I'm confused why running this script without bundling does nothing:

import { createRoot, createSignal, createEffect } from "solid-js";

const root = createRoot(() => {
  const [counter, setCounter] = createSignal(0);
  createEffect(() => {
    console.log(counter());
  });

  return {
    counter,
    setCounter,
  };
});

root.setCounter(1);

import { createRoot, createSignal, createEffect } from "solid-js";

const root = createRoot(() => {
  const [counter, setCounter] = createSignal(0);
  createEffect(() => {
    console.log(counter());
  });

  return {
    counter,
    setCounter,
  };
});

root.setCounter(1);

After I bundle (using rollup or bun) and run the script, my effect runs and logs the value of counter, like I expect. How does bundling make reactivity work, even without using babel?

6 replies

SSolidJS

•Created by vveisard on 12/31/2023 in #support

How to create effect for each element of mapArray?

Hello, I'm exploring reactive patterns, and I'm stumped on how to create effects for elements of the result of mapArray. What I've got so far: https://github.com/vveisard/fiddle-solid-array-effect/blob/main/src/index.ts I'm thinking the return type of those memos ought to be Accessor<Array<Accessor<Array>>>, right? But how do I create that structure, and how to I create an effect that runs when the array element changes?

6 replies

Gaming

Programming