状态管理
了解 DeepTrans Studio 的状态管理架构和实现方式
状态管理概述
DeepTrans Studio 使用 Redux Toolkit 进行全局状态管理，结合 React Hooks 和本地存储，提供高效、可预测的状态管理方案。
架构设计
状态管理采用分层架构，包括全局状态（Redux）、本地状态（React Hooks）和持久化存储（LocalStorage）。
1
Redux Store
使用 Redux Toolkit 管理全局应用状态，包括编辑器状态、翻译状态、UI 状态等。
- 使用 @reduxjs/toolkit 的 configureStore 创建 store
- 通过 createSlice 创建状态切片（Slice）
- 支持 TypeScript 类型推断
- 提供时间旅行调试能力
2
React Hooks
使用自定义 Hooks 封装状态逻辑，提供简洁的组件接口。
- useTranslationState - 翻译状态管理
- useSidebar - 侧边栏状态
- useRightPanel - 右侧面板状态
- useBottomPanel - 底部面板状态
- useUserSettings - 用户设置（持久化到 LocalStorage）
3
本地存储
使用 LocalStorage 持久化用户设置和偏好。
- 用户设置（翻译引擎、词典选择、记忆库选择）
- 布局配置（面板大小、侧边栏状态）
- 主题偏好
Store 结构
Redux Store 包含以下主要状态切片：
editor
编辑器状态，管理富文本编辑器的内容和格式
translation
翻译状态，包括当前翻译阶段、源文、译文、语言设置
workFlowStep
工作流步骤状态，管理预翻译、质量保证、后编辑等流程的状态和数据
activeDocumentItem
当前活动的文档项，跟踪用户正在编辑的段落
activeDocument
当前活动的文档，管理文档级别的状态
explorerTabs
资源管理器标签页，管理文档树结构
sidebar
侧边栏状态，控制左侧资源管理器的显示和折叠
rightPane
右侧面板状态，管理 AI 聊天、预览等面板的显示
panel
底部面板状态，控制翻译流程面板的显示
running
运行状态，跟踪各种任务的执行状态（翻译、质量保证、后编辑等）
projectInit
项目初始化状态，管理项目初始化流程的步骤和数据
dialog
对话框状态，管理各种模态对话框的显示
log
日志状态，存储操作日志和调试信息
chatbar
聊天栏状态，管理 AI 聊天助手的状态
tabBar
标签栏状态，管理文档标签页
使用方式
在组件中使用状态管理的方式：
使用 Redux Hooks
import { useAppSelector, useAppDispatch } from '@/store/hooks';
import { setTranslationStage } from '@/store/features/translationSlice';
const stage = useAppSelector(state => state.translation.currentStage);
const dispatch = useAppDispatch();
dispatch(setTranslationStage('MT'));使用自定义 Hooks
import { useTranslationState } from '@/hooks/useTranslation';
const { currentStage, sourceText, targetText } = useTranslationState();使用用户设置 Hook
import { useUserSettings } from '@/hooks/useUserSettings';
const { settings, updateProvider } = useUserSettings();
updateProvider('openai');最佳实践
1
将全局共享状态放在 Redux Store 中，组件内部状态使用 useState
2
使用 createSlice 创建状态切片，利用 Redux Toolkit 的简化 API
3
通过自定义 Hooks 封装复杂的状态逻辑，提高代码复用性
4
用户偏好设置使用 LocalStorage 持久化，避免每次刷新丢失
5
避免在 Redux 中存储非序列化的数据（如函数、类实例）
6
使用 TypeScript 类型定义确保状态类型安全