语法

2024年02月26日

柏拉文

越努力，越幸运

一、最佳实践

---

1.1 Counter Store

import { makeAutoObservable } from "mobx";

class Counter {
  value = 0;

  constructor() {
    makeAutoObservable(this);
  }

  add() {
    this.value++;
  }

  min() {
    this.value--;
  }

  set(value: number) {
    this.value = value;
  }
}

export default Counter;

1.2 全局 Store

import Counter from "./counter";

export class RootStore {
  counter: Counter;

  constructor() {
    this.counter = new Counter();
  }
}

const rootStore = new RootStore();
export default rootStore;

1.3 Store Context

import { RootStore } from "./rootStore";
import { createContext, useContext } from "react";

export const StoreContext = createContext<RootStore | null>(null);

export const useStore = (): RootStore => {
  const store = useContext(StoreContext);
  if (!store) throw new Error("Store is not provided");
  return store;
};

1.4 Store Context Provider

import rootStore from "./rootStore";
import { StoreContext } from "./storeContext";

export const StoreProvider = ({ children }: { children: React.ReactNode }) => {
  return (
    <StoreContext.Provider value={rootStore}>{children}</StoreContext.Provider>
  );
};

1.5 入口配置

import App from "./App.tsx";
import ReactDOM from "react-dom/client";
import { StoreProvider } from "./store/mobx/storeContextProvider";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <StoreProvider>
    <App />
  </StoreProvider>
);

1.6 状态使用

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

const App = observer(() => {
  const { counter } = useStore();

  const handleAdd = () => {
    counter.add();
  };

  const handleMin = () => {
    counter.min();
  };

  const handleSet = () => {
    counter.set(10);
  };

  return (
    <div>
      <h1>{counter.value}</h1>

      <button onClick={() => handleAdd()}>增加</button>
      <button onClick={() => handleMin()}>减少</button>
      <button onClick={() => handleSet()}>设置</button>
    </div>
  );
});

export default App;