CODEWITHSUNDEEP
reactjsrenderingmobxmobx-react
Giardiv
Giardiv

Reputation: 65

React + Mobx : the render is not triggered

When I update a property of my Mobx store, the value is updated but the rendering is not triggered.

My store

@observable leftAsideActive = 4;
@observable rightAsideActive = false;

@action setAsideState(side, active) {
    if(side == UI_LEFT){ this.leftAsideActive = active};
    if(side == UI_RIGHT){ this.rightAsideActive = active};
}

getLeftState(){
    return this.leftAsideActive;
}

My view looks like that, basically

class IOManagerView extends React.Component {
constructor(props){
    super(props);
}

render() {
    const { inputFiles, leftIsActive, handleFileChosen, activeLeft } = this.props;

    return (
        {leftIsActive + " "}
    )
}

From my controller

class IOManagerController extends React.Component {
constructor(props){
    super(props);
    this.state = {
        displayed: true
    }

    this.handleFileChosen = this.handleFileChosen.bind(this);
    this.activeLeft = this.activeLeft.bind(this);
}

activeLeft(){
    this.props.UI.activeLeft();
}

render() {
    const { inputFiles, UI } = this.props;
    return (
        <IOManagerView 
            leftIsActive={UI.leftState()}

            activeLeft={this.activeLeft}
        />
    )
}
}

If I check to value of UI.leftState() before and after running this.props.UI.activeLeft();, then I can see that the value is well update

Strangely, I have another which work perfectly for both action and rerendering. I compared both set a file, they are twins

Upvotes: 1

Views: 530

Answers (1)

Tholle
Tholle

Reputation: 112897

You must make sure that the components that use the observables use the @observer decorator so that they will re-render when an observable change.

@observer
class IOManagerView extends React.Component {
  // ...
}

@observer
class IOManagerController extends React.Component {
  // ...
}

Upvotes: 4

Related Questions