Optimize React Native Redux State Management

Creates and optimizes Redux Toolkit slices for React Native, applying mobile-specific state-management patterns: mobile-first design (handling network connectivity changes, background/foreground transitions, device-specific behavior), performance optimization (minimizing re-renders under mobile memory constraints), an offline-first approach (working from cached data and syncing once connectivity returns), TypeScript type safety, and a persistence strategy built for efficient serialization with redux-persist. A typical slice tracks not just data, loading, and error but also lastSync, networkState, and a pendingActions queue, with extraReducers handling an async thunk's pending/fulfilled/rejected lifecycle. It implements network-aware async thunks: a data-fetch thunk that checks connectivity first, falls back to cached AsyncStorage data when offline, and caches fresh API responses for later offline use; and a background-sync thunk that replays queued pending actions once back online, keeping only the ones that failed. Selectors are memoized with createSelector, including a composed UI-state selector (hasData, isLoading, showOfflineIndicator, canRefresh) and a pending-sync-count selector for UI badges. Persistence is configured with an explicit whitelist (only data and lastSync) and blacklist (excluding loading/error) plus a write throttle, so transient state never gets persisted and writes stay cheap. A useUser hook ties it together for components: it refreshes on screen focus via useFocusEffect, and triggers the sync thunk automatically when networkState flips back to online.

Use it for React Native state that must survive app backgrounding, work offline, and reconcile once connectivity returns - not for purely local, ephemeral UI state that doesn't need persistence or network awareness.

Input is the mobile data domain to manage (for example a user profile) and its network/offline requirements. Output is a Redux Toolkit slice (state shape, reducers, extraReducers), network-aware async thunks with offline fallback and action queuing, a syncPendingActions thunk for replaying the queue on reconnect, memoized selectors, a redux-persist configuration with whitelist/blacklist/throttle, and a component-facing hook wiring selectors, refresh-on-focus, and background sync together.

Built on Redux Toolkit (createSlice, createAsyncThunk, createSelector), redux-persist with AsyncStorage as the storage engine, NetInfo for connectivity detection, and @react-navigation/native's useFocusEffect for refresh-on-focus behavior.

For React Native developers building state that needs to be offline-resilient rather than assuming constant connectivity. Best practices covered: normalized state for complex data relationships, error boundaries for network failures and data corruption, extensive createSelector use to avoid unnecessary re-renders, batching state changes to minimize persistence writes, and testing with mocked network states and offline scenarios.

import AsyncStorage from '@react-native-async-storage/async-storage'
import { persistReducer } from 'redux-persist'

const persistConfig = {
  key: 'user',
  storage: AsyncStorage,
  whitelist: ['data', 'lastSync'], // Only persist essential data
  blacklist: ['loading', 'error'], // Don't persist transient state
  throttle: 1000, // Throttle writes for performance
}

export const persistedUserReducer = persistReducer(
  persistConfig,
  userSlice.reducer
)