skills.rest
nghyane
nghyaneCOMMUNITY
Explore all skills by this author →
Website𝕏@nghyaneGitHub

mobile-state-patterns

Implements TanStack Query, useReducer, and Zustand state patterns for React Native apps.

3|1|Updated Jan 12, 2026
Search Tags:#authentication#state management#zustand#react native#tanstack query#expo#usereducer
One-click install
npx skills add https://github.com/nghyane/VSTEP --skill mobile-state-patterns-nghyane
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-state-patterns
Source: https://github.com/nghyane/VSTEP/tree/main/apps/mobile-v2/.agents/skills/mobile-state-patterns
Command: npx skills add https://github.com/nghyane/VSTEP --skill mobile-state-patterns-nghyane

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-query, zustand, expo-secure-store.

What problem does it solve? Managing server state, session state, and local state consistently in a React Native + Expo app is error-prone, leading to scattered API calls, try/catch spaghetti in components, and insecure token storage. This Skill provides enforced patterns for each state layer. ## Core Features & Use Cases - Server State with TanStack Query: Standardized useQuery/useMutation hooks with global error handling, query keys, and select transforms. - Session State with useReducer: Discriminated-union reducers for practice and exam sessions with typed Map/Set state. - Local Stores with Zustand: Sync-only stores (coin, streak) with separate async loader functions called at app launch. - Auth Flow: React Context + SecureStore token storage with route guards in Expo Router layouts. - Use Case: When building a new exam-taking screen, apply the exam reducer pattern, wire submission through useMutation, and let the global error handler manage 401 logout. ## Quick Start Ask the AI to implement a new practice session screen following the mobile state patterns for queries, mutations, and reducer-based session state.

Frequently Asked Questions about mobile-state-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage server state in React Native with TanStack Query?▼

Wrap reads in useQuery hooks with stable queryKey arrays and writes in useMutation hooks. Configure a QueryClient with staleTime and a global mutation onError handler so components never call the API directly.

When should I use useReducer vs Zustand in a React Native app?▼

Use useReducer for component-scoped session state like practice or exam flows with discriminated-union actions. Use Zustand for shared local state such as coin balances or streaks, keeping stores synchronous and loading data via separate async functions.

How do I store auth tokens securely in Expo?▼

Use expo-secure-store's SecureStore API, not AsyncStorage, to persist access tokens, refresh tokens, and user data. Centralize all SecureStore calls in a single auth module so components never import SecureStore directly.

How do I handle 401 errors globally with TanStack Query?▼

Define a global onError handler in the QueryClient mutation defaults that checks for an UNAUTHORIZED error and triggers signOut. This removes the need for try/catch blocks around mutations in individual components.

How do I implement route guards with Expo Router?▼

Place the guard in a useEffect inside the root layout, reading auth status and segments to redirect to login, onboarding, or tabs. Return early while status is initializing and render null until authenticated to prevent UI flashes.

Related Skills

Explore More Software Engineering Skills→
xoaixoai
25

stack-react-native-expo

Document integration patterns for React Native with Expo Router, Zustand, MMKV, and TanStack Query.

Community
Advanced
rudrankriyamrudrankriyam
954

asc-build-lifecycle

Manage App Store Connect build lifecycles using the asc CLI tool.

Community
Intermediate
kongliulikongliuli

frontend-api-call-generator

Generate Fetch or Axios wrappers with centralized error handling and retry logic.

Community
Advanced
joabgonzalezjoabgonzalez
7

redux-toolkit

Configure Redux stores with slices, thunks, and typed hooks.

Community
Advanced