Mobx: [Question] How to handle forms with mobx and async side effects

[royriojas]

Quick questions (mobx seems to be awesome by the way!)

1. Do you have an example of a medium complex form using mbox? I was not able to find it in the examples.
2. Also how will you handle side effects? persisting your data to the server or asynchronous events coming from a websocket that update the data?

If you have examples of this will be awesome!

[mweststrate]

See also #104, better examples are in preparation, but the TodoMVC example is a nice one to start with.

For form validation it works usually conveniently well to introduce @observable / @computed properties on your form component that keeps track of the validation state. Probably using a project like formsy-react will work fine as well.

Side effects are best handled using autorun. The TodoMVC and SurviveJS Kanban demonstrate this nicely. Receiving changes from websockets are even easier to handle, just modify your state and the rest is taken care of for you :). (Of course, beware of endless loops; your state changes will trigger your autorun's that are supposed to submit changes back to the server. A central flag or versioning your objects might simply solve this)

[royriojas]

Thank you will give it a try! Awesome job!

[sridharAJ]

@royriojas and @mweststrate i want to use controlled form element in my form, What is the best workaround.

Can you please share some examples.

[royriojas]

Hi @sridharAJ

I've made a helper for that basically. I don't have the final version of it, but I have one of the proof of concepts I did.

https://jsfiddle.net/royriojas/qp5p33cn/

This one shows a helper that can be used to construct a "form model", with validation, both async and sync.

[sridharAJ]

Hi,

Thank you so much.

On Friday 20 May 2016, Roy Riojas [email protected] wrote:

Hi @sridharAJ https://github.com/sridharAJ

I've made a helper for that basically. I don't have the final version of
it, but I have one of the proof of concepts I did.

https://jsfiddle.net/royriojas/qp5p33cn/

This one shows a helper that can be used to construct a "form model", with
validation, both async and sync.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/mobxjs/mobx/issues/129#issuecomment-220502373