How to use mobx with solid.js?

[ghost]

Recently I have started watching videos on YouTube how to use mobx & i have seen 2 videos using mobx with react through mobx-react library & react Context, but have wonder how i use mobx with solid.js.
but, I can't find any library to integrate mobx with solid.js.
what you recommend?

[urugator]

I am not very familiar with solidjs, but I don't think there is much (if any) value in introducing mobx on the top of it. Just use it's createStore or createMutable.

[mweststrate]

IIRC mobx and solid are quite easy to integration as they are founded on the same principles, I thought Ryan had a PoC of that somewhere, but couldn't find it anymore. That being said, since solid already provides a very similar reactivity mechanism, I'm not sure if I would see the point of bringing MobX as well, I assume (never tried) Solid is similarly powerful in organising state

[ghost]

i know solid.js has a lot of state managment methods (hooks) like createSignal, createMemo, createMutable, createResource, more..., but what i need is to use mobx easyness in solid.js! last time i have used createResource with urql to query graphql server & store the result & it also has a refetch method, which is really cool!

[garkin]

SolidJS state management patterns doesn't work with big nested state as well as MobX for me.
Pretty tedious. Not Redux level of exhaustion, but still very laborious.
MobX in comparison is just effortless and straightforward.

[scott-cornwell]

@mweststrate @garkin I found this but it doesn't work right for me. It seems to have problems updating my nested state and just breaks randomly without error. You are underselling Mobx, it's a huge disappointment not to be able to use it with Solid. It's faster than React but just as tedious. Please make mobx-solid integration actually work!
import { Reaction } from 'mobx'
import { enableExternalSource } from 'solid-js'

// register MobX as an external source
let id = 0;
enableExternalSource((fn, trigger) => {
const reaction = new Reaction(mobx@${++id}, trigger);
return {
track: (x) => {
let next;
reaction.track(() => (next = fn(x)));
return next;
},
dispose: () => reaction.dispose()
};
});

[scott-cornwell]

Ok actually the snippet I posted above does work fine with Solid! I was trying to use this CSS library called glory and I was having issues with that.

[gotjoshua]

Here is a fork from solids original sandbox with some more object types:
https://codesandbox.io/s/solid-mobx-with-array-obj-and-map-forked-updated-enhanced-zfql8d?file=/index.js