Обновляется состояние только после хот релоада mobx react?

Question

[Icantdothis]

Имею такой модуль:

import {action, makeObservable, observable} from "mobx";

class menuStore {
    opened: boolean = false;

    setOpened(){
        console.log('s1')
        this.opened = true
    };

    constructor() {
        makeObservable(this, {
            opened: observable,
            setOpened: action
        })
    };
}

export default new menuStore();

весь мусор с ними:

import menuStore from "./menu";

export { menuStore };

а также проблемный компонент (немного почистил для ускорения чтения):

import React, {useEffect} from 'react';
import { menuStore } from '../store'

const Menu = () => {

    useEffect(()=>{
        console.log(menuStore.opened)
    },[menuStore.opened])

    return (
        <Container className={` ${ menuStore.opened ? 'active' : ''} `}>
            <div className="panel">PANEL</div>
        </Container>
    );
}

export default Menu;

Собственно такая проблема, что у меня не появляется класс 'active' на Container. Попробовал смотреть изменение состояния из useEffect, но это как нож в спину - тоже ничего..
Сам метод из класса menuStore отрабатывает, однако компонент Menu не видит текущего значения.. Как это решается и почему так?

Answer 1

[Alexandroppolus]

https://mobx.js.org/react-integration.html

Оберни компонент в observer

Comments

[Icantdothis]

А нужно ли в таком случае оборачивать другой компонент, который выполняет задачу изменения значения в хранилище?

[Alexandroppolus]

Icantdothis, если он при своем рендере не читает какие-либо наблюдаемые значения, то не надо.