After upgrading to 5.0.0, ObservableMap.size is no longer reactive

[roostapour]

I am using MobX+React in my project. I upgraded the MobX to 5.0.0 yesterday and my code does not work anymore. Here is an example of how I use MobX:

AppStore.ts:

class Store {
@observable elements: Map<string, Element> = new Map<string, Element>();

@action addElement (ID, color) {
   this.elements.set(ID, new Element(ID, color)
 }
}

class Element {
@observable ID: string;
@observable color: string;
...
}

main.tsx:

ReactDOM.render(
        <Provider appStore={appStore}>
            <App />
        </Provider>,
        document.getElementById("app"));

App.tsx:

@inject("appStore")
@observer
export class App extends React.Component<any, any> {
render() {
return (<div>
              <Selector/>
              <Data/>
        </div>);
}
}

Selector.tsx:

@inject("appStore")
@observer
export class Selector extends React.Component<any, any> {
onSelect(id, color){
    this.props.appStore.addElement(id, color);
}
}

Data.tsx:

@inject("appStore")
@observer
export class Data extends React.Component<any, any> {
render() {
var elements = this.props.appStore.elements;
return (<div>
             {elements}
         </div>);
}
}

Before, when I select something in selector, it adds a new element to the appstore elements and the render function of Data gets called and shows the elements including the new one. But after the upgrade, by selecting and adding an element the Data's render() doesn't get called! Any idea what can be the problem?

Here are my packages:
"mobx": "^5.0.0"
"mobx-react": "^5.2.1"
"mobx-utils": "^5.0.0"

[mweststrate]

Can you put this in a sandbox? Op vr 8 jun. 2018 22:43 schreef Laleh Roostapour <[email protected]>:

…

I am using MobX+React in my project. I upgraded the MobX to 5.0.0 yesterday and my code does not work anymore. Here is an example of how I use MobX: AppStore.ts: class Store { @observable elements: Map<string, Element> = new Map<string, Element>(); @action addElement (ID, color) { this.elements.set(ID, new Element(ID, color) } } class Element { @observable ID: string; @observable color: string; ... } main.tsx: ReactDOM.render( <Provider appStore={appStore}> <App /> </Provider>, document.getElementById("app")); App.tsx: @Inject("appStore") @observer export class App extends React.Component<any, any> { render() { return (<div> <Selector/> <Data/> </div>); } } Selector.tsx: @Inject("appStore") @observer export class Selector extends React.Component<any, any> { onSelect(id, color){ this.props.appStore.addElement(id, color); } } Data.tsx: @Inject("appStore") @observer export class Data extends React.Component<any, any> { render() { var elements = this.props.appStore.elements; return (<div> {elements} </div>); } } Before, when I select something in selector, it adds a new element to the appstore elements and the render function of Data gets called and shows the elements including the new one. But after the upgrade, by selecting and adding an element the Data's render() doesn't get called! Any idea what can be the problem? Here are my packages: "mobx": "^5.0.0" "mobx-react": "^5.2.1" "mobx-utils": "^5.0.0" — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1583>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhKcFnzdUbQDGaLwUKpoCHLyeL2H3ks5t6uINgaJpZM4Ug7UJ> .

[roostapour]

@mweststrate Sure. I added the example here: https://codesandbox.io/s/0o6vxpzjr0

If you switch between "mobx": "^5.0.0" and "mobx": "^4.3.1" you will see that the first one does not show the updated size of the elements (always zero, renders the Data only once) but the next one dose it correctly.

[urugator]

@mweststrate map.size is not reactive in v5, here is a small repro: https://codesandbox.io/s/5y7j2x0nx

[mweststrate]

Thanks for the report @roostapour and analysis @urugator! Released a fix as 5.0.1