Почему не происходит повторный рендер компонента после изменения состояния mobx?

Question

[Никита]

Есть Aside, который должен показываться/скрываться при нажатии а свитчер

import { observer } from 'mobx-react'
import asideStore from './aside.store'

const Aside = observer(props => {
    const switcherClick = () => {
        asideStore.toggleAside()
    }

    return (
        <Wrapper {...props}>
            <Switcher onClick={switcherClick} />
            {asideStore.show ? 'show' : 'hide'}
        </Wrapper>
    )
})

И есть простейший стор для Aside

import { observable } from 'mobx'

class AsideStore {
    @observable show

    constructor() {
        this.show = true
    }

    toggleAside() {
        this.show = !this.show
    }
}

export default new AsideStore()

Проблема в том, что this.show изменяется, но не перерендеривается в компоненте.

С чем это может быть связано?

Answer 1

[Bazyn]

Вроде так должно сработать.

@action.bound
 toggleAside() {
        this.show = !this.show
    }

https://mobx.js.org/actions.html

Answer 2

[Андрей Пастухов]

Похоже что у вас MobX версии 6, а для него в конструкторе требуется навесить makeObservable(this) или makeAutoObservable(this) подробнее тут

Так что у вас 2 варианта:
1) Даунгрейдить MobX на 5 версию
2) Использовать в конструкторе makeAutoObservable(this)