Mobx

mobx

熱更新 hot module 問題

用了 observer 就必須加上 hot， 不然界面不會自動刷新

import { observer } from "mobx-react";
import { hot } from "react-hot-loader";
@observer
@hot(module)
export default class UploadPage extends Component<Props, State> {}

demoStore.ts

import React, { Component } from "react";
import { observable, computed, observe, action, transaction, toJS } from "mobx";

class DemoStore {
  @observable name: string = "無名";
  @computed get fullName(): string {
    return "fullName：" + this.name;
  }

  /** 修改名稱 */
  @action
  changeName = (name: string) => {
    this.name = name;
  };
}
const demoStore = new DemoStore();
export default demoStore;

Demo.tsx

import React, { Component } from "react";
import demoStore from "./demoStore";

interface Props {}
interface State {}
@observer
export default class Demo extends Component<Props, State> {
  readonly state: State = {};
  @observable pageName: string = "demo";

  changePageName = (pageName: string) => {
    this.pageName = pageName;
  };
  render() {
    return (
      <div>
        <div>用戶名: {demoStore.name}</div>
        <div> {demoStore.fullName}</div>
        <div onClick={() => demoStore.changeName("趙日天")}>修改</div>

        <div> {this.pageName}</div>
        <div onClick={() => this.changePageName("demoPage")}>修改</div>
      </div>
    );
  }
}

緩存

import React, { Component } from "react";
import { observable, computed, observe, action, transaction, toJS } from "mobx";
import { create, persist } from "mobx-persist";

class UserStore {
  @persist @observable token = "";
  @persist("object") @observable data = { name: "嘿嘿" };
}
const userStore = new UserStore();
export default userStore;

const hydrate = create();
hydrate("userStore", userStore).then(() => {
  console.log("store同步成功");
});

監(jiān)聽

import { reaction } from "mobx";
import demoStore from "./demoStore";

// 監(jiān)聽
const myReaction = reaction(
  () => demoStore.name,
  name => {
    console.log("reaction change:", name);
  }
);
// 取消監(jiān)聽
myReaction && myReaction();