Почему не перерисовывается компонент (React+MobX)?

Question

[uzumaki]

Не получается заставить счётчик (count) перерисовываться по нажатию на кнопку...
Раньше делал напрямую через обычную функцию изменяя состояние на + 1, щас появилась необходимость делать через MobX, но не работает. Отрисовывает только при перезаходе вручную а не в реал тайме.

basket.tsx

import { observer, inject } from "mobx-react";
import basketStore from "../stores/basketStore";

const EmptyOrNot = inject("basketStore")(
observer((props) => {
const { basketStore } = props;
return (
  <>
    <ShoppingCartIcon color="disabled" style={{ fontSize: 150 }} />
    <Typography style={{ fontSize: 23 }}>
      <Typography>{basketStore.count}</Typography>
    </Typography>
  </>
  );
 })
);

const BasketPage = inject("basketStore")(
observer((props) => {
const { basketStore } = props;

return (
  <>
    <Container className="EmptyBasket">
      <Container>
        <EmptyOrNot />
        <Button onClick={basketStore.increase}>Test Button</Button>
      </Container>
    </Container>
  </>
  );
 })
);
export default BasketPage;

basketStore.ts

import { observable, action } from "mobx";

class Basket {
@observable count = 0;

@action increase = () => {
this.count = this.count + 1;
 };
}

const BasketStore = new Basket();
export default BasketStore;

Answer 1

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

Что бы заработал inject Нужно выше прокинуть значение через Provider. Тут пример

<Provider basketStore={basketStore}>
  <EmptyOrNot />
  <Button onClick={basketStore.increase}>Test Button</Button>
</Provider>