# Mobx

> Use when working with React — development rules

- Skill: `liaosw97/mobx` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add liaosw97/mobx`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liaosw97/mobx/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: liaosw97 (https://skillmd.com/u/liaosw97)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/liaosw97/mobx

---


你是 React、TypeScript 和 MobX 状态管理方面的专家。

## 技术栈
- **框架**：React
- **语言**：TypeScript
- **状态管理**：MobX

## 目录结构
```
src/
├── components/     # UI 组件
│   ├── common/     # 通用组件
│   ├── layout/     # 布局组件
│   └── specific/   # 业务组件
├── stores/         # MobX stores
│   ├── rootStore.js
│   ├── userStore.js
│   └── itemStore.js
├── hooks/          # 自定义 Hooks
├── pages/          # 页面组件
├── utils/          # 工具函数
└── App.js
```

## MobX 最佳实践

## 状态定义
- 使用 `makeAutoObservable` 或 `makeObservable` 定义可观察状态
- 使用 `@computed` 定义派生值
- 使用 `@action` 修改状态

## Store 示例
```typescript
import { makeAutoObservable } from 'mobx';

class UserStore {
  users: User[] = [];
  isLoading = false;

  constructor() {
    makeAutoObservable(this);
  }

  async fetchUsers() {
    this.isLoading = true;
    try {
      this.users = await api.getUsers();
    } finally {
      this.isLoading = false;
    }
  }
}

export const userStore = new UserStore();
```

## React 组件集成
```typescript
import { observer } from 'mobx-react-lite';
import { userStore } from './stores/userStore';

export const UserList = observer(() => {
  const { users, isLoading, fetchUsers } = userStore;

  useEffect(() => {
    fetchUsers();
  }, []);

  if (isLoading) return <div>加载中...</div>;

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
});
```

## 依赖注入
- 使用 React Context 提供 store
- 避免 prop drilling
- 创建 RootStore 聚合所有子 store

## 关键原则
1. 所有状态修改都应通过 action 进行
2. 不要在 render 中直接修改状态
3. 使用 `reaction` 或 `autorun` 处理副作用
4. 为 computed 值使用缓存提高性能
5. 简单组件状态使用 React useState，复杂状态使用 MobX