mobx-react 使用

import { render } from "react-dom";
import App from "./App";
import store from "./store";
import { Provider } from "mobx-react";
 
const rootElement = document.getElementById("root");
render(
  <Provider {...store}>
    <App />
  </Provider>,
  rootElement
);

import { makeObservable, observable, action } from "mobx";
 
class Home {
  constructor() {
    makeObservable(this, {
      data: observable,
      onChange: action.bound
    });
  }
  data = "home";
  onChange(data) {
    this.data = data;
  }
}
 
class About {
  constructor() {
    makeObservable(this, {
      value: observable,
      onChange: action.bound
    });
  }
  value = "About";
  onChange(value) {
    this.value = value;
  }
}
// 上⾯的模块应该分散在各⾃的业务中，这⾥就不使⽤导⼊的⽅式了
export default {
  home: new Home(),
  about: new About()
};
 

import React from "react";
import { inject, Observer } from "mobx-react";
 
function MobxReact({ home, about }) {
  return (
    <h3>
      <h2>mobx-react</h2>
      <button onClick={() => home.onChange(Math.random())}>
        home:
        <Observer>{() => home.data}</Observer>
      </button>
      <br />
      <button onClick={() => about.onChange(Math.random())}>
        about:
        <Observer>{() => about.value}</Observer>
      </button>
    </h3>
  );
}
 
export default inject("home", "about")(MobxReact);