SolidJSS
SolidJS•2y ago•
5 replies
vveisard

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


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