alichs-in-dubai 前端项目分析报告

基于 Zustand 状态管理的完整架构分析

📊 项目概览

项目	信息
位置	`~/workspace/alichs-in-dubai`
框架	Razzle 4.2.17 + React 18.0.1
路由	React Router 6.26.2
状态	Zustand 4.4.7 + zustand-pub 1.0.0-beta.19
UI	Ant Design 5.21.6
样式	Less 4.1.0 + Scss 1.89.0

🗂️ 目录结构

alichs-in-dubai/
├── src/
│   ├── actions/           # Redux actions（已弃用）
│   ├── components/        # 可复用组件
│   ├── containers/        # 容器组件
│   ├── reducers/          # Redux reducers（已弃用）
│   ├── routes/            # 路由配置
│   ├── stores/            # ✅ Zustand 状态管理
│   │   ├── index.js       # PubStore 配置
│   │   ├── globalStore.js # 全局状态
│   │   ├── authStore.js   # 认证状态
│   │   ├── userStore.js   # 用户状态
│   │   ├── webseriesStore.js # Web Series 状态
│   │   └── bsfusionStore.js  # BS Fusion 状态
│   ├── styles/            # 全局样式
│   ├── util/              # 工具函数
│   ├── widgets/           # 业务组件
│   ├── index.js           # 入口文件
│   └── client.js          # 客户端入口
├── config/                # 配置文件
└── package.json

🛣️ 路由结构

路由规则

模式	路径前缀	说明
普通页面	无前缀	PC端普通页面
移动端H5	`/m`	移动端H5页面
管理后台	`/admin`	管理后台页面

路由组织

routes/
├── index.js              # 路由入口
├── home.js               # 首页路由
├── m/                    # 移动端路由
│   ├── index.js
│   └── ...
└── admin/                # 管理后台路由
    ├── index.js
    └── ...

🎯 Zustand 状态管理

1. PubStore 配置（跨应用共享）

// src/stores/index.js
import PubStore from 'zustand-pub';

// 创建共享 store
const pubStore = new PubStore('yuntun');

export default pubStore;

2. Store 结构

全局状态（globalStore.js）：

import pubStore from './index';
import { create } from 'zustand';

const globalStoreDef = (set) => ({
  isDrawerOpen: false,
  drawerFormType: '',
  drawerProps: {},
  
  setDrawerVisible: (visible, info) => {
    const updates = { isDrawerOpen: visible };
    if (info) {
      updates.drawerFormType = info?.type || '';
      updates.drawerProps = info?.data || {};
    }
    set(updates);
  },
});

const globalStore = pubStore.defineStore('global', globalStoreDef);
export const useGlobalStore = create(globalStore);

3. 使用方式

import { useGlobalStore } from '@/stores/globalStore';

function MyComponent() {
  const { isDrawerOpen, setDrawerVisible } = useGlobalStore();
  
  const handleOpenDrawer = () => {
    setDrawerVisible(true, {
      type: 'form-type',
      data: { title: '标题' }
    });
  };
  
  return (
    <Button onClick={handleOpenDrawer}>
      {isDrawerOpen ? '关闭' : '打开'} Drawer
    </Button>
  );
}

4. Store 列表

Store	文件	功能
globalStore	globalStore.js	全局状态（Drawer等）
authStore	authStore.js	认证状态（登录/登出）
userStore	userStore.js	用户信息状态
webseriesStore	webseriesStore.js	Web Series 数据
bsfusionStore	bsfusionStore.js	BS Fusion 数据

💻 代码风格

1. ES6+ 特性

使用情况：

✅ const / let 替代 var
✅ 箭头函数 () => {}
✅ async/await 处理异步
✅ 模板字符串
✅ 解构赋值
✅ 展开运算符

2. React 组件

容器组件模式：

// containers/ExampleContainer.js
import { connect } from 'react-redux';
import Example from '../components/Example';

const mapStateToProps = (state) => ({
  data: state.example.data
});

const mapDispatchToProps = (dispatch) => ({
  fetchData: () => dispatch({ type: 'FETCH_DATA' })
});

export default connect(mapStateToProps, mapDispatchToProps)(Example);

注意： 部分旧代码还在使用 Redux，新代码应该使用 Zustand。

3. Zustand 模式

创建 Store：

import { create } from 'zustand';
import pubStore from './index';

// 方式1：使用 PubStore（推荐）
const storeDef = (set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
});

const store = pubStore.defineStore('myStore', storeDef);
export const useMyStore = create(store);

// 方式2：直接创建（不共享）
export const useMyStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

4. 样式规范

混合使用 Less 和 Scss：

Less： Ant Design 组件样式
Scss： 自定义样式
CSS Modules： 部分组件

🚀 开发指南

1. 新增页面

步骤：

创建组件：src/widgets/NewWidget/
创建容器：src/containers/NewContainer.js
创建路由：src/routes/new.js
添加到路由入口：src/routes/index.js

2. 新增状态管理

使用 Zustand：

创建 Store：src/stores/newStore.js

使用 PubStore（如果需要跨应用共享）：

import pubStore from './index';
import { create } from 'zustand';

const storeDef = (set) => ({
  data: null,
  setData: (data) => set({ data }),
});

const store = pubStore.defineStore('newStore', storeDef);
export const useNewStore = create(store);

在组件中使用：

import { useNewStore } from '@/stores/newStore';

function MyComponent() {
  const { data, setData } = useNewStore();
  // ...
}

3. 命名规范

类型	规范	示例
组件	PascalCase	`UserProfile`
容器	PascalCase + Container	`UserProfileContainer`
Store	camelCase + Store	`userStore`
Hook	use + PascalCase	`useUserStore`
Action	camelCase	`setUserData`

📝 关键文件

文件	位置	说明
入口文件	`src/index.js`	服务器端入口
客户端入口	`src/client.js`	客户端入口
路由入口	`src/routes/index.js`	路由配置
Store 入口	`src/stores/index.js`	PubStore 配置
全局状态	`src/stores/globalStore.js`	全局状态管理
配置	`config/`	环境配置

🔄 迁移建议

从 Redux 迁移到 Zustand

步骤：

保留 Redux 旧代码（暂时不删除）
新功能使用 Zustand
逐步迁移旧代码：
- 将 Redux reducer 转换为 Zustand store
- 更新组件中的 connect/useSelector
- 测试功能正常后删除 Redux 代码

示例迁移：

Redux (旧)：

// reducers/user.js
const initialState = {
  user: null,
  loading: false
};

export const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    default:
      return state;
  }
};

// 组件中
import { useSelector, useDispatch } from 'react-redux';
const user = useSelector((state) => state.user.user);
const dispatch = useDispatch();
dispatch({ type: 'SET_USER', payload: userData });

Zustand (新)：

// stores/userStore.js
import { create } from 'zustand';

export const useUserStore = create((set) => ({
  user: null,
  loading: false,
  setUser: (user) => set({ user }),
}));

// 组件中
import { useUserStore } from '@/stores/userStore';
const { user, setUser } = useUserStore();
setUser(userData);

🚀 快速开始

1. 启动开发服务器

cd ~/workspace/alichs-in-dubai
pnpm dev

2. 构建生产版本

pnpm build

3. 启动生产服务器

pnpm start

📊 项目统计

统计项	数量
组件	~50+
容器	~30+
路由	~20+
Zustand Stores	5+
旧 Redux	保留但不再使用

⚠️ 注意事项

1. 状态管理

✅ 新代码使用 Zustand
⚠️ 旧代码可能还有 Redux
✅ 跨应用共享使用 zustand-pub

2. PubStore Key

const pubStore = new PubStore('yuntun');

重要： 所有微应用必须使用相同的 key（'yuntun'）才能共享状态。

3. 微前端集成

主应用配置：

// 主应用
pubStore.defineStore('global', globalStoreDef);

微应用配置：

// 微应用
const globalStore = pubStore.getStore('global');
export const useGlobalStore = create(globalStore);

📚 相关文档

最后更新： 2026-03-24 维护者： Schwarz (中书省+工部)