MobX 6 + React FC + TS 的使用 最佳实践

此篇为 mobx 6 + react + ts 最新应用实践

MobX官网的示范代码风格 class 组件和函数式组件混用，翻看 github 仓库中mobxjs/mobx-react-lite的 readme.md 文件后发现，有些废弃的 api 也在官网示例上，感觉官网的示例比较难以理解。

安装 👇

安装两个官方包

pnpm i mobx mobx-react-lite

创建 👇

// store
// 可以创建多个store，使用时引入对应store即可
import { makeAutoObservable } from "mobx";

interface StoreProps {
  data: {
    name: string;
  };
  changeName: (value: string) => void;
}

const store: StoreProps = makeAutoObservable<StoreProps>({
  data: {
    name: "default name",
  },
  changeName: (val: string) => (store.data.name = val), // action
});

export default store;

使用 👇

// any component
import { observer } from 'mobx-react-lite'
import store from '@/store'

const Welcome = () => {
    const { data: { name } } = store;
    return <p> hello { name } </p>
}

export defalut observer(Welcome);// observer返回一个响应式组件

修改 👇

// any component
import store from '@/store'

const ChangeInput = () => {
    const { changeName } = store;
    return <input onChange={ ({ target: { value } }) => changeName(value) }></input>;
};

export defalut ChangeInput

相比 Redux 的 /store /action /reducer connect action dispatch redux-thunk(异步中间件) 一系列痛苦操作(当然 Redux 现在也有 hook 了)，减少了中间写 connect action dispatch 等操作。

mobx 6 通过 makeAutoObservable 创建数据源，observer 订阅数据。

mobx 可以通过创建多个 store，避免单 store 臃肿。

代码更简洁，可读性更好。