mobx-state-tree support

[beshanoe]

Hi there! It would be great to have a support for mobx-state-tree(https://github.com/mobxjs/mobx-state-tree) library in order to use it's features like snapshot, actions tracking etc. Or it can be embedded somehow already?

[foxhound87]

This would be cool to have. I still don't know how much this could affect the current implementation in terms of refactoring. But definitely I want see this happen when the project gains more interest.

[carlosagsmendes]

Hey @beshanoe,

did you make any progress on using mobx-react-form with mobx-state-tree?

Thanks

[beshanoe]

@carlosagsmendes I was trying to implement the similar api to mobx-react-form using MST, but since then they've changed api dramatically and I decided to wait for some time until it stabilizes. And I'm not sure that it's possible combine MST and MRF in it's current form

[carlosagsmendes]

Thanks for the feedback. I should get back to this in a couple of weeks and will report my findings back

[andrefox333]

Any updates on these @carlosagsmendes?

[carlosagsmendes]

Hi @andrefox333, unfortunately not much.

I would really like to have 'mobx-react-form' working with MST but I haven't found a way to extend MST models.

Apparently, we cannot extend primitive types like strings for example and I'm not sure about what the alternative approach would be.

@foxhound87, can you offer any guidance? I would be glad to work on this.

Thanks

[tujoworker]

@carlosagsmendes I have made a two way connection and post how I did it here.

In a react component i have this:

constructor(props) {
super(props)
// here I create the form
this.form = new FormModel()
...

componentWillMount() {
// here I bind the form with the store
this.disposer = this.props.store[CUSTOM].bindForm(this.form)
...

In the mst store, I have this action:

  .actions(self => ({
    bindForm(form, defaultValues = {}) {

      // bind the store model to the form model
      form.set(
        'value',
        Object.assign(defaultValues, getSnapshot(self.props.fields))
      )

      // store the values in the store
      self.mergeData({ fields: form.values() })

      // react on form value changes
      const disp1 = reaction(
        () => form.values(),
        values => self.mergeData({ fields: values })
      )

      // react on field changes in the store and send them to the form
      const disp2 = onSnapshot(self.props.fields, snapshot =>
        form.set('value', snapshot)
      )

      // make it possible to dispatch the listeners
      return () => {
        disp1()
        disp2()
      }
    },
    mergeData(props) {
      self.props = Object.assign(self.props, props) // If we use Fields model
      return self
    },
...

Maybe this helps?

[andrefox333]

@tujoworker, thanks for chiming in. Do you have a working example repo I can check out?

[tujoworker]

@andrefox333 No, but once You have a simple example, it's not easy to integrate. I can help you out once you have a example repo.

[kristianmandrup]

@tujoworker Hej Tobias ;) Would love to see you expand on that example, perhaps with a gist and some notes on what you do at each step.

What is the bindForm method? what are you returning etc. I think many of us are not deeply into the underlying API and how to use it effectively for this kind of scenario. Thanks.

Just made a clone of mst and mobx-react-form but found no bindForm method in any of those libr. Where does the method come from? MobX or self made?

[tujoworker]

Hi @kristianmandrup the bindForm is simply a custom method, I define in the mst action in my mst store.

[kristianmandrup]

But you don't show what this custom method does behind the scenes. Could you post a gist please :)

[tujoworker]

Try to read the code comments carefully, maybe it will help. I may make a gist next week, right now it's not possible to scrape more time out of my calendar.

[akaguny]

@tujoworker , any gist?

[foxhound87]

This is not going to be implemented anymore.