12

Using Mobx, after updating the store (i.e. clicking the button) the component does not re-render. I've installed mobx devtools which shows nothing after the initial load, and there is no error in the console. Any ideas what I've done wrong?

Store.js:

import { observable } from 'mobx';

class Store {

    @observable me;

    constructor() {
        this.me = 'hello';
    }

    change_me(){
        this.me = 'test 1234';

    }

}


export default Store;

layout.js:

import React from "react";
import { observer } from 'mobx-react';


@observer
export default class Layout extends React.Component{

    render(){

        return(
            <div>
                <h1>{this.props.store.me}</h1>
              <button onClick={this.on_change}>Change</button>
            </div>
        )
    }

    on_change = () => {
        this.props.store.change_me();
    }
}

index.js:

import React from "react";
import ReactDOM from "react-dom";
import Layout from "./components/Layout";
import Store from "./Store";
import DevTools, { configureDevtool } from 'mobx-react-devtools';

// Any configurations are optional
configureDevtool({
    // Turn on logging changes button programmatically:
    logEnabled: true,
    // Turn off displaying conponents' updates button programmatically:
    updatesEnabled: false,
    // Log only changes of type `reaction`
    // (only affects top-level messages in console, not inside groups)
    logFilter: change => change.type === 'reaction',
});


const app = document.getElementById('app');
const store = new Store();

ReactDOM.render(

    <div>
        <Layout store={store} />
        <DevTools />
    </div>
, app);
11
  • I copy pasted your code and it works in my environment. after updating the store the component does not re-render means after you click the button right ?
    – Max
    Commented Nov 20, 2016 at 9:35
  • Yep exactly. So it works for you? What else could it be?
    – Chris
    Commented Nov 20, 2016 at 9:39
  • Just a wild guess, check your import directory, whether its correct or not.
    – Max
    Commented Nov 20, 2016 at 9:48
  • Import directory? That would make the whole app not work at all wouldn't it? The app is working, just the update after clicking the button.
    – Chris
    Commented Nov 20, 2016 at 9:54
  • 2
    Have you read this? You might need to put transform-decorators-legacy first in your list of plugins.
    – Tholle
    Commented Nov 21, 2016 at 10:31

4 Answers 4

2

I would start by adding @action to your change_me() function. From what I understand, it's not always completely required, but I have encountered problems like this in my own code several times when I've forgotten to add it.

Additionally post your .babelrc as @mweststrate suggested, as it will help others to check that the proper plugins are loaded.

2

My guess would be to have uninitialized @observable. It is very counter-intuitive, but Babel doesn't handle those well. Even adding @observable me = undefined might help (see the generated js code when you assign something there. Generally I'd remove constructor completely and move the initialization to declaration (i.e. @observable me = "hello" an no constructor). It should then work fine.

2

Just add makeObservable(this); in constructor function like below

    constructor() {
       makeObservable(this);
    }
-1

Watch the binding of the this context.

<button onClick={this.on_change}>Change</button>

the this reference will not be to the class, so likely when you are actually clicking it is going to say something along the lines of no props on undefined. Changing to:

  <button onClick={this.on_change.bind(this)}>Change</button>

should fix it. Or better yet, bind the context in the constructor so its not re-binding on every render

 constructor(props) {
   super(props)
   this.on_change = this.on_change.bind(this)
 }

then you can go back to your

5
  • 3
    This is very wrong answer, for 2 reasons. First, on_change is bound to this, by the way it is declared, so original call by {this.on_change} is good. Then, having .bind() inside {} is an anti-pattern, leading to downgraded performance, and should never be used.
    – Nopik
    Commented Nov 20, 2016 at 22:26
  • 1
    @Nopik Not actually true. on_change is not bound to this. React autobinds similar methods but only if the component is declared through createClass, not when ES6 classes are used.
    – Sulthan
    Commented Nov 21, 2016 at 12:23
  • @Nopik as sultan says, you really need to read up on your binding. Also, as I demonstrate below, the proper pattern is to bind in the constructor. You can read more here as well: egorsmirnov.me/2015/08/16/react-and-es6-part3.html
    – dpastoor
    Commented Nov 21, 2016 at 18:25
  • 8
    on_change is already bound because it’s written this way: on_change = () => { ... } which causes a binding during instantiation. See ES Public Class Fields proposal for more info.
    – Thai
    Commented Nov 22, 2016 at 7:00
  • 1
    @dpastoor 1) Sulthan is wrong, 2) the very link you've posted lists the method used as method 4, as a valid way of binding to this (just not in the standard yet, apparently OP uses extensions)
    – Nopik
    Commented Nov 22, 2016 at 22:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.