0

MOBX isn't reacting to data changes done through a Proxy object.

I'm using a Proxy object to decorate an object model, then storing the Proxy object in my MOBX store to be displayed in my React UI.

DataModel.js

import { extendObservable } from 'mobx'

export default function DataModel() {
   extendObservable(this, {
      prop1: 'foo',
      prop2: 'bar',
   })
}

decorateDataModel.js

export default function decorateDataModel(model) {
   return new Proxy(model, {
      get: (target, property) => {
         // do some things ...
         return model[property];
      set: (target, property, value) => {
         // do some things ...
      }
   });
}

MyStore.js

import { observable } from 'mobx';
import DataModel from './path/to/DataModel';
import decorateDataModel from './path/to/decorateDataModel';

class Store {
   @observable data = decorateDataModel(new DataModel());
}
const MyStore = new Store();
export default myStore;

And then I have an observer React component that watches 'data' and renders it in a table. If I do not decorate it, it behaves as you would expect. If I use the console to change some fields, MOBX reacts and the new data is rendered. However, when I decorate it with the Proxy, it does not react to changes. Using the console to check the data, shows that it did change, but MOBX did not react to the change.

Has anyone else had this problem? How can I get MOBX to react to the changes in my decorated object?

Andy Frey
  • 131
  • 2
  • 14
  • Checkout https://stackoverflow.com/questions/51596874/set-array-of-data-into-mobx-array-show-proxy-objects – Qamar Nov 22 '21 at 14:17

1 Answers1

0
import { extendObservable } from 'mobx'

const DataModel = () =>{
   extendObservable(this, {
      prop1: 'foo',
      prop2: 'bar',
   })  //<--- Close your parenthesis?
};
Ahmad Khan
  • 2,655
  • 19
  • 25
Jason Mullings
  • 850
  • 14
  • 10
  • This was an error in my post, but wasn't present in my original code. In any case, it still doesn't work with correct syntax. – Andy Frey Feb 07 '19 at 20:01