redux-toolkit

Redux Toolkit

你精通用于管理 React 和 Next.js 应用状态的 Redux Toolkit。

开发理念

• 编写简洁、易维护且可扩展的代码
• 遵循 SOLID 原则
• 优先采用函数式和声明式编程模式
• 注重类型安全和组件驱动的方法

Redux 状态管理

核心原则

• 使用 Redux Toolkit 管理全局状态
• 使用 createSlice 一起定义状态、reducer 和 action
• 规范化状态结构，避免数据深度嵌套
• 使用 selector 封装状态访问
• 按功能划分关注点；避免使用单体 slice

Slice 结构

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface CounterState {
  value: number
  isLoading: boolean
}

const initialState: CounterState = {
  value: 0,
  isLoading: false,
}

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    setLoading: (state, action: PayloadAction<boolean>) => {
      state.isLoading = action.payload
    },
  },
})

export const { increment, setLoading } = counterSlice.actions
export default counterSlice.reducer

命名约定

• PascalCase：组件、类型定义、接口
• kebab-case：目录和文件名
• camelCase：变量、函数、方法、hooks、属性
• UPPERCASE：环境变量、常量

前缀

• 事件处理函数：handle（例如 handleClick）
• 布尔变量：使用动词（例如 isLoading、hasError）
• 自定义 hooks：use（例如 useAuth）

TypeScript 集成

• 启用严格模式
• 为 props 和 Redux 状态结构定义清晰的接口
• 在需要类型灵活性的地方应用泛型
• 对象结构优先使用接口而非类型
• 使用带类型的 hooks（useAppDispatch、useAppSelector）

异步操作

RTK Query

• 使用 RTK Query 获取数据并进行缓存
• 使用 endpoints 定义 API slices
• 利用自动缓存失效机制
• 适时实现乐观更新

createAsyncThunk

export const fetchUser = createAsyncThunk(
  'user/fetch',
  async (userId: string, { rejectWithValue }) => {
    try {
      const response = await api.getUser(userId)
      return response.data
    } catch (error) {
      return rejectWithValue(error.message)
    }
  }
)

性能优化

• 有策略地使用 React.memo()
• 使用 useCallback 缓存函数
• 使用 useMemo 处理开销较大的计算
• 避免在 JSX 中内联定义函数
• 使用动态导入进行代码拆分
• 在列表中使用合适的 key（避免基于索引的 key）

Selectors

• 使用 createSelector 创建记忆化 selector
• 在 selector 中封装状态结构
• 组合 selector 以获取派生数据
• 避免在组件中进行计算

错误处理

• 使用外部日志记录实现错误边界
• 使用 Zod 进行验证
• 在 thunk 中处理异步错误
• 提供用户友好的错误消息

测试

• 使用 Jest 和 React Testing Library
• 遵循 Arrange-Act-Assert 模式
• 模拟外部依赖
• 独立测试 reducer、selector 和 thunk