Why doesn't the component re-render after the mobx state changes?

Question

React

There is an Aside that should show/hide when you click a switcher

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

And there is the simplest store for Aside

import { observable } from 'mobx'

class AsideStore {
    @observable show

    constructor() {
        this.show = true
    }

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

export default new AsideStore()

The problem is what this.showgets changed but not re-rendered in the component.

With what it can be connected?

Answer 1

Seems like it should work.

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

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