mobx 初使用

1. 安装react 程序

npx create-react-app my-app --template typescript

2. 安装mobx

npm install mobx-react-lite mobx

mobx	mobx-react-lite	Browser
6	3	Modern browsers (IE 11+ in compatibility mode)
5	2	Modern browsers
4	2	IE 11+, RN w/o Proxy support

3. 创建一个 store文件夹并创建userStore.ts index.ts countStore.ts三个文件

• useStore.ts

import { makeAutoObservable } from "mobx";

type User = {
  name: string;
  email?: string;
  age: number;
};
class UserStore {
  user: User | null = {
    name: "李四",
    age: 6,
  };

  constructor() {
    makeAutoObservable(this);
  }

  setUser = (user: User) => {
    this.user = user;
  };

  changeUserName = (name: string) => {
    if (this.user) {
      this.user.name = name;
    }
  };

  changeUserAge = () => {
    if (this.user) {
      this.user.age = this.user.age - 1;
    }
  };

  clearUser = () => {
    this.user = null;
  };
}

export default UserStore;

• countStore.ts

import { makeAutoObservable } from "mobx";

// 模拟数据请求
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(3);
    }, 1000);
  });
};

class CountStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment = () => {
    this.count++;
  };

  asyncIncrement = async () => {
    try {
      let data = (await fetchData()) as number;
      this.count = this.count + data;
    } catch (error) {
      throw new Error("Error in asyncIncrement");
    }
  };

  decrement = () => {
    this.count--;
  };
}

export default CountStore;

• index.ts

import React from "react";
import CountStore from "./CountStore";
import UserStore from "./UserStore";

const RootStore = Object.freeze({
  countStore: new CountStore(),
  userStore: new UserStore(),
});

const RootStoreContext = React.createContext(RootStore);

export const useRootStore = () => React.useContext(RootStoreContext);

export const RootStoreProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  return (
    <RootStoreContext.Provider value={RootStore}>
      {children}
    </RootStoreContext.Provider>
  );
};

4. 使用

• index.ts

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import { RootStoreProvider } from "./store";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <RootStoreProvider>
      <App />
    </RootStoreProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

app.tsx

import { observer } from "mobx-react-lite";
import { useRootStore } from "./store";

const App = observer(() => {
  const { countStore, userStore } = useRootStore();
  const { count, increment, decrement, asyncIncrement } = countStore;
  const { user, changeUserName, changeUserAge } = userStore;
  return (
    <>
      <div>
        <h1>value: {count}</h1>
        <button onClick={() => increment()}>加 1</button>
        <button onClick={() => decrement()}>减 一</button>
        <button onClick={() => asyncIncrement()}>异步加 3 </button>
      </div>
      <div>
        <h1>
          name: {user?.name} age: {user?.age}
        </h1>
        <button onClick={() => changeUserName("张三")}>+</button>
        <button onClick={() => changeUserAge()}>-</button>
      </div>
    </>
  );
});

export default App;