原文链接: mobx-react 多个store 和 全局状态

上一篇: mobx-react 类似vuex的react版 响应式状态管理

下一篇: netlify 上部署的app 使用 name 的https域名

和context配合确实很方便, 只是对于所有的函数式组件需要用observer包装一层有点难受

为什么js没有函数装饰器啊啊啊啊啊

不过在react中用mobx和在vue中redux一样奇怪....

https://mobx-react.js.org/recipes-context#multiple-global-stores

基本上是创建两个store, 通过context注入到组件中, 所有需要使用响应时的地方都需要用observer包装

import React from 'react';
import { observable, action, computed } from 'mobx';
import { observer } from 'mobx-react';
class CounterStore {
  @observable
  count = 0;

  @action
  increment() {
    this.count++;
  }

  @action
  decrement() {
    this.count--;
  }

  @computed
  get doubleCount() {
    return this.count * 2;
  }
}
class ThemeStore {
  @observable
  theme = 'light';

  @action
  setTheme(newTheme: string) {
    this.theme = newTheme;
  }
}
export const storesContext = React.createContext({
  counterStore: new CounterStore(),
  themeStore: new ThemeStore(),
});

export const useStores = () => React.useContext(storesContext);

// src/components/Counter.tsx
export const Counter = observer(() => {
  const { counterStore } = useStores();

  return (
    <>
      <div>{counterStore.count}</div>
      <button onClick={() => counterStore.increment()}>++</button>
      <button onClick={() => counterStore.decrement()}>--</button>
    </>
  );
});

// src/components/ThemeToggler.tsx
export const ThemeToggler = observer(() => {
  const { themeStore } = useStores();

  return (
    <>
      <div>{themeStore.theme}</div>
      <button onClick={() => themeStore.setTheme('light')}>
        set theme: light
      </button>
      <button onClick={() => themeStore.setTheme('dark')}>
        set theme: dark
      </button>
    </>
  );
});

// src/App.tsx
const App = observer(() => {
  const { counterStore } = useStores();
  return (
    <div>
      app double:{counterStore.doubleCount}
      <Counter />
      <ThemeToggler />
    </div>
  );
});

export default App;