reactjs - mobx-react observer, observable ayarladığımda tetiklenmiyor

Mobx ve Typescript kullanarak bir React uygulaması oluşturmaya çalışıyorum. Ama çalışmıyor.

Sayacın saniyeleri saymasını bekliyorum. Ve olayın gerçekleştiğini ve sayacı güncellediğini görüyorum. Ama bileşen yeniden render edilmiyor. Ne yapıyorum yanlış?

import React from "react";
import { observable, action } from "mobx";
import { observer, inject, Provider } from "mobx-react";

export class TestStore {
    @observable timer = 0;

    @action timerInc = () => {
        this.timer += 1;
    };
}

interface IPropsTestComp {
    TestStore?: TestStore;
}

@inject("TestStore")
@observer
export class TestComp extends React.Component<IPropsTestComp> {
    constructor(props: IPropsTestComp) {
        super(props);
        setInterval(() => {
            this.props.TestStore!.timerInc();
        }, 1000);
    }

    render() {
        return <div>{this.props.TestStore!.timer}</div>;
    }
}

export class TestApp extends React.Component {
    render() {
        return <Provider TestStore={new TestStore()}>
            <TestComp />
        </Provider>
    }
}

Cevap #1

MobX 6 kullanıyor musunuz?

Decorator API, MobX 5'ten biraz farklı hale geldi, artık önceki işlevselliği elde etmek için constructor içerisinde makeObservable yöntemini kullanmanız gerekiyor:

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

export class TestStore {
    @observable timer = 0;

    constructor() {
      makeObservable(this);
    }

    @action timerInc = () => {
        this.timer += 1;
    };
}

Büyük olasılıkla dekoratörleri tamamen bırakmanıza izin verecek yeni bir şey olmasına rağmen, makeAutoObservable:

import { makeAutoObservable } from "mobx";

export class TestStore {
    timer = 0;

    constructor() {
      // Don't need decorators now, just this call
      makeAutoObservable(this);
    }

    timerInc = () => {
        this.timer += 1;
    };
}

Daha fazla bilgi için: https://mobx.js.org/react-integration.html

İlgili makaleler