SolidJS•17mo ago

Breaking out proxied Stores object as a signal (while retaining reactivity)

Let's say I have an album object...

type Album = {
    id: string;
    artist: string;
    rating?: number
    // etc. 
}

type Album = {
    id: string;
    artist: string;
    rating?: number
    // etc. 
}

, composed as Store array....

const [collection, setCollection] = createStore<Album[]>([]);

const [collection, setCollection] = createStore<Album[]>([]);

Now, the user can swipe through using Swiper (or similar), which Solidjs makes wonderfully straight-forward to implement using For control "tag". Question: What is the best Solid pattern for passing selected item as a property to a properties page while retaining reactivity? In other words, when the user clicks (selects) a Swiper slide, a callback fn sends the id, which is used to bind the properties page (enabling user to add/edit the Album property fields). I understand from watching some of Ryan's videos (so helpful and insightful!) that a Store is composed of signal primitives, so, in theory (I think ¯\_(ツ)_/¯) , I should be able to get at a proxied object and pass it as a signal, just as if I were passing a signal as a property. The alternative is to pass the store and the id to the props page (or break it out into context), but I'd prefer to be surgical, but not clear to me how to go about handling. Any ideas much appreciated? I'm still very much getting my feet wet w/ SolidJS (just a couple days into it), so apologies in advance if covered in the doc (I did check). Thanks! -Roland.

4 Replies

Unknown User•17mo ago

Message Not Public

hotshoe•17mo ago

Hi @ofabram , thanks for getting back! I'll take a closer look and see what I can learn/apply. Appreciate the response and suggestion -- I'll let u know how goes. TY :0) Hi @ofabram , I'm able to get the behavior I'm seeking by calling back with with the proxied state object and using it to mutate using produce. It works well (so nice to have such fine grained control versus C = {...C} on collections!, and it's THE reason I'm hanging in there w/porting my SvelteKit project over to SS, and the transparency). It's not the design I had in mind, which is to call back with a string identifier -- and ignorance shouldn't drive design so that erks me -- but I'm ok for now and should be a much better place to revisit in a couple weeks time - once get more experience w/ Solid. The only selection API I see from docs is createSelector, which has different purpose that my use case (afaict). Is there another selection API to which you're referring? Thanks again!

Unknown User•17mo ago

Message Not Public

hotshoe•17mo ago

thx again 🙂

Gaming

Programming

Breaking out proxied Stores object as a signal (while retaining reactivity)