Subscribe to any unknown store change

Hi. Is there a way to subscribe to a store change in unknown property?
I have a store:

type StoreValue = Record<string, number>;

 const [store, setStore] = createStore<StoreValue>({
    a: 0,
    b: 0,
  });

type StoreValue = Record<string, number>;

 const [store, setStore] = createStore<StoreValue>({
    a: 0,
    b: 0,
  });

And sometimes I modify it

      <button type="button" onClick={() => setStore("a", undefined)}>
        setStore("a", undefined)
      </button>

      <button type="button" onClick={() => setStore("a", undefined)}>
        setStore("a", undefined)
      </button>

And I want to render it's unwrapped value on each change (and I don't know the change upfront)

<div>
        ⚠️ store - not updating because store is not reactive - only its values:{" "}
        {JSON.stringify(unwrap(store))}
      </div>

<div>
        ⚠️ store - not updating because store is not reactive - only its values:{" "}
        {JSON.stringify(unwrap(store))}
      </div>

How to make the store value reactive to unknown changes?

bigmistqke•2/4/23, 7:19 PM

this is currently not possible, the advice given is to wrap setStore instead. Something like

nirtamir2OP•2/4/23, 7:23 PM

Thanks!

nirtamir2OP•2/4/23, 7:23 PM

If I want to subscribe to unknown keys I think it's better to solve it by wrapping the store value in some object.
Meaning:
Instead of

Doing

Then I can do

Is it considered a best practice?

bigmistqke•2/4/23, 7:27 PM

I don't think it makes a difference. This strategy of

JSON.stringify

JSON.stringify

ing the store to trigger an effect will work, but there is a cost to

JSON.stringify

JSON.stringify

bigmistqke•2/4/23, 7:28 PM

It's not the most optimal way, the most optimal way rn would be to wrap the setter instead.

bigmistqke•2/4/23, 7:29 PM

as an aside, you do not need unwrap either. will be equivalent to afaik.

nirtamir2OP•2/4/23, 7:29 PM

I try my suggestion - and it did not work

nirtamir2OP•2/4/23, 7:29 PM

I wonder why

bigmistqke•2/4/23, 7:30 PM

if u could make a minimal reproduction in the playground, i can look at it

nirtamir2OP•2/4/23, 7:30 PM

Yes

nirtamir2OP•2/4/23, 7:30 PM

https://codesandbox.io/p/sandbox/solidjs-reactivity-context-reactive-store-setter-forked-rmix5o?file=%2Fsrc%2FApp.tsx&selection=%5B%7B%22endColumn%22%3A78%2C%22endLineNumber%22%3A41%2C%22startColumn%22%3A43%2C%22startLineNumber%22%3A41%7D%5D

solidjs reactivity - context reactive - store setter (forked)

CodeSandbox is an online editor tailored for web applications.

bigmistqke•2/4/23, 7:33 PM

something specific u have questions about?

nirtamir2OP•2/4/23, 7:34 PM

Yes - How make the
<div>{JSON.stringify(unwrap(store.value))}</div>
reactive

nirtamir2OP•2/4/23, 7:34 PM

I mean - I want it to change when value.a changes without knowing upfront that value.a changed ()

bigmistqke•2/4/23, 7:37 PM

don't unwrap

bigmistqke•2/4/23, 7:38 PM

i guess unwrap untracks the reactive value

nirtamir2OP•2/4/23, 7:38 PM

You right!

nirtamir2OP•2/4/23, 7:38 PM

Thank you!

bigmistqke•2/4/23, 7:38 PM

yes, i don't think u ever really need to use unwrap tbh

bigmistqke•2/4/23, 7:38 PM

u can just work w the proxy directly

bigmistqke•2/4/23, 7:39 PM

ur welcome!

nirtamir2OP•2/4/23, 7:39 PM

Actually this seems resonable (unwrap inside effect does not track the dependency)

bigmistqke•2/4/23, 7:40 PM

a didn't know that, never really touched it. only use it if i want cleaner debug-log

bigmistqke•2/4/23, 7:40 PM

to get rid of the proxy-clutter.

thetarnav•2/4/23, 9:06 PM

there is also this thing: https://codesandbox.io/s/observing-state-6epzp?file=/index.js

CodeSandboxryansolid

Observing State - CodeSandbox

Observing State by ryansolid using babel-preset-solid, object-observer, solid-js

nirtamir2OP•2/4/23, 9:18 PM

Thanks!

nirtamir2OP•2/4/23, 9:21 PM

Now I created another demo that confused me a bit

nirtamir2OP•2/4/23, 9:22 PM

Is JSON.stringify(store) reactive? Not that I removed the unwrap (my mistake for it sorry) it seems that store value is updated

nirtamir2OP•2/4/23, 9:28 PM

@bigmistqke @thetarnav
Sorry - my mistake - store is reactive. Meaning that if store.a changes - store changes too so it's jsx / effect will rerun.
I infer it by looking at this codesandbox I created:
https://codesandbox.io/p/sandbox/solidjs-reactivity-context-reactive-store-setter-eccv7z?file=%2Fsrc%2FApp.tsx&selection=%5B%7B%22endColumn%22%3A10%2C%22endLineNumber%22%3A16%2C%22startColumn%22%3A10%2C%22startLineNumber%22%3A16%7D%5D

solidjs reactivity - context reactive - store setter

CodeSandbox is an online editor tailored for web applications.

Tthetarnav there is also this thing: https://codesandbox.io/s/observing-state-6epzp?file=/i...

bigmistqke•2/4/23, 9:32 PM

that's neat

Nnirtamir2 @bigmistqke @thetarnav Sorry - my mistake - store is reactive. Meaning that if ...

bigmistqke•2/4/23, 9:34 PM

what is the question?

nirtamir2OP•2/4/23, 9:35 PM

No question. Just clarification to myself and other that will look at this in the future

nirtamir2OP•2/4/23, 9:35 PM

Thanks for the help

bigmistqke•2/4/23, 9:36 PM

ur welcome

aryzing•10/24/23, 1:20 PM

By any chance would you know how to correctly type the aliased

setStore

setStore

with Typescript?

aryzing•10/24/23, 1:22 PM

When typed as below, the type of the args is

never

never

, which throws errors in the existing setters,

bigmistqke•10/26/23, 9:50 PM

there is from