SuperAPI AI 工具集

react-native-state

前端与建站

查看项目

更新于 10-16 08:07

技能介绍

用途:这是一个面向 React Native 的状态管理学习技能,目标是让开发者掌握生产可用的状态管理方案,包括 Redux Toolkit、Zustand、TanStack Query 以及基于 AsyncStorage/MMKV 的持久化。

前提条件:需具备 React Native 基础、TypeScript 基础,并理解 React hooks。

学习目标:完成后可配置带 TypeScript 的 Redux Toolkit、创建带持久化的 Zustand store、用 TanStack Query 管理服务端状态、用 AsyncStorage/MMKV 持久化数据,并为不同场景选择合适方案。

涵盖主题:Redux Toolkit 配置(configureStore、RootState、AppDispatch 类型)、RTK Slice(createSlice、PayloadAction)、Zustand store(create 配合 persist 与 createJSONStorage)、TanStack Query(useQuery、useMutation、queryKey、staleTime、invalidateQueries)、方案选型对照(useState/useReducer 用于组件局部状态,Zustand 用于简单全局状态与偏好,Redux Toolkit 用于复杂应用状态与大型团队,TanStack Query 用于服务端状态与缓存同步,Context 用于主题、鉴权状态等低频场景)。

使用方式:技能调用为 Skill("react-native-state"),关联代理编号 03-react-native-state。资料提供 Zustand + TanStack Query 组合示例,以及常见错误与解决方案(如 Redux 状态中出现函数导致 Non-serializable value、持久化配置错误导致状态未持久化、缺少失效设置导致数据陈旧),并附验证清单(状态更新、重启后持久化、服务端状态同步、TypeScript 类型正确)。

限制:资料未说明该技能的价格、收费方式、支持平台、具体版本或额外依赖;文中示例代码仅作说明,实际使用需结合自身项目配置。