MobX nedir?

Projemiz büyüdükçe React componentlerde oluşturduğumuz stateleri alt componentlere veya üst componentlere aktarmak giderek karmaşık olmakta bu yüzden state management kütüphaneleri ortaya çıkmıştır.

Diğer bir alternatif olarak Redux inceelenebilir. Ben projelerimde MobX kullanıyorum.

Kısa bir örnekle özetleyecek olursak.

@observable

State verilerini observerable decoratorunu kullanarak store tanımlıyoruz.

@action

Verileri değiştirebilecek fonksiyonları tanımlıyoruz.

import { action, observable } from 'mobx';

class AuthStore {
  @observable isSignedIn = false;

  @action setAuth(status) {
    this.isSignedIn = status;
  }
}

export default new AuthStore();

@inject

inject decoratoru ile react componentine store dosyasını ekliyoruz.

@observer

observer decoratoru ile react componentinin store dosyasının gözlemcisi olduğunu belirtiyoruz. Yani storedaki data değiştiğinde component otomatik olarak güncellenecek.

@inject('AuthStore')
@observer
class App extends Component {
  componentDidMount() {
  
  }
  render() {
    const { AuthStore } = this.props;
    return (<div>{AuthStore.isSignedIn}<div/>)
  }
}

Not: Decorator kullanımı için babel’e ek ayarlamalar yapmanız ve aşağıdaki babel pluginini yüklemeniz gerekiyor.

@babel/plugin-proposal-decorators