React + Mobx: рендеринг не срабатывает

Question

Когда я обновляю свойство моего магазина Mobx, значение обновляется, но рендеринг не запускается.

Мой магазин

@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;
}

Мой взгляд выглядит так, в основном

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

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

    return (
        {leftIsActive + " "}
    )
}

Из моего контроллера

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}
        />
    )
}
}

Если я проверю значение UI.leftState() до и после запуска this.props.UI.activeLeft();, то я увижу, что значение хорошо обновляется

Странно, у меня есть еще один, который отлично подходит как для действий, так и для перерисовки. Я сравнил оба набора файлов, они близнецы

Answer 1

Вы должны убедиться, что компоненты, которые используют наблюдаемые, используют декоратор @observer, чтобы они повторно визуализировались, когда наблюдаемое изменение.

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

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