next and mobx

[olup]

A nice to have feature would be to have an example on the wiki of how to use this with mobx as an alternative to redux.

[we12ndi]

What's up mark. Tell Wendi hi for me

[olup]

Sorry i don't know Mark and Wendi. I am a french coder and have been working a couple of time with mobx, that i prefer over flux/redux. I am very interested by the Next.js project, but wish to have an example on how it could be powered with mobx. I'll try and have a look myself when i get the time, but authors have probably an idea on how to do it properly.

[fdidron]

Bonjour Olup,

I have been looking into getting a mobx / next proof of concept up and running. So far I have been able to create a store on the server and somehow get it to work on the client. Values on the store are kept during page transitions, however I'm still struggling getting observer components to work, basically my observers are not re rendered when an observable value is changed.

I'm going to work on this a bit more and will eventually share some code / progress in here.

[olup]

Please do, i'll be really happy to help when i get somme free time. The way with Mobx is usually to create a wrapper class or a decorator to handle some central store changes and trigger rerender. See react+mobx over the internet there is a couple of design pattern described. I suppose it should work all the same with next - however i am not familiar enough with it to foresee where problems could arise.

For example, a good library that implements re render on observable change and share the store to the decorated classes is mobx-react https://github.com/mobxjs/mobx-react

[DigitalMarc]

Hi all.
I'm testing the tutorial presented here: https://mobxjs.github.io/mobx/getting-started.html but I end up with this issue:

Module build failed: SyntaxError: Unexpected token (33:0)
 class ObservableTodoStore {
> @observable todos = [];

basically it fails to recognize @observable.
Thanks a lot for your help.

[fdidron]

Hi @DigitalMarc

You are getting this error, because next's configuration is not transpiling decorators (You can see the reason in the "What syntactic features are transpiled? How do I change them?" section of the README's FAQ.

So you need to use mobx without decorators to make this work, I recommend looking at this section of the mobx documentation : https://mobxjs.github.io/mobx/best/decorators.html : "Creating observable properties without decorators"

Finally it seems that the decorator notation should work pretty soon looking at the findings of @timoxley in issue #26

[DigitalMarc]

@fdidron thanks a lot! I was currently looking at this issue, I'm getting there (sorry for my newbiness on this, just started to work on this stack since a couple of day).

[fdidron]

@DigitalMarc No worries, just started a few days ago too :)

[fdidron]

Hi,

I have something working here https://github.com/fdidron/mobx-next-example

(Very basic proof of concept). The main issue I'm trying to tackle is store hydration now. Once I get it working I'll update the README with some explanations.

This is vastly inspired by @impronunciable Redux example

[olup]

Great job ! Thanks, i'll have a look too !

[olup]

Have you read this ? Great pattern on store hydration, as seen in he mobx-connect package :
https://medium.com/@foxhound87/state-management-hydration-with-mobx-we-must-react-ep-05-1922a72453c6#.hekk1tl2r

[fdidron]

I got the store hydration to work (The repo is updated) . I will work on cleaning up and writing a proper README later this week, in the meantime let me know if you need help.

[DigitalMarc]

@fdidron Thanks a lot mate, that's great work! That would be very helpful if you can add some comment in the code as well to help getting up on this.

[foxhound87]

Would be cool to have mobx + state hydration in next.js or others features of the rfx-stack such as support for modular css and postcss.

If this happen, I will certainly implement next.js as base core of the rfx-stack.

@fdidron You can find some utility stuff for the auto-injection and hydration of the state for mobx stores on the rfx-core package.

And decorators are definitely a must for mobx development.

[arunoda]

Guys, now we've a example.
Check this: https://github.com/zeit/next.js/tree/master/examples/with-mobx (via #676)