Cross-Platform State Management: Redux, Riverpod, and MobX

// ✅ Local state - belongs to one component
function SearchInput() {
  const [query, setQuery] = useState('');

  return (
    <TextInput
      value={query}
      onChangeText={setQuery}
      placeholder="Search..."
    />
  );
}

// ❌ Premature global state
// Don't put search input in global store unless needed across screens

// ✅ Global state - shared across screens
// authStore.ts
interface AuthState {
  user: User | null;
  token: string | null;
  isLoading: boolean;
}

// Consumed by: ProfileScreen, SettingsScreen, CheckoutScreen
function useAuth() {
  return useAuthStore(state => ({
    user: state.user,
    isAuthenticated: !!state.token,
  }));
}

import { configureStore } from '@reduxjs/toolkit';
import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux';
import authReducer from './slices/authSlice';
import cartReducer from './slices/cartSlice';
import productsReducer from './slices/productsSlice';

export const store = configureStore({
  reducer: {
    auth: authReducer,
    cart: cartReducer,
    products: productsReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['auth/login/fulfilled'],
      },
    }),
  devTools: __DEV__,
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import { authApi } from '../../api/auth';

interface AuthState {
  user: User | null;
  token: string | null;
  isLoading: boolean;
  error: string | null;
}

const initialState: AuthState = {
  user: null,
  token: null,
  isLoading: false,
  error: null,
};

export const login = createAsyncThunk(
  'auth/login',
  async (credentials: LoginCredentials, { rejectWithValue }) => {
    try {
      const response = await authApi.login(credentials);
      await SecureStore.setItemAsync('token', response.token);
      return response;
    } catch (error) {
      return rejectWithValue(error.message);
    }
  }
);

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    logout(state) {
      state.user = null;
      state.token = null;
    },
    updateProfile(state, action: PayloadAction<Partial<User>>) {
      if (state.user) {
        state.user = { ...state.user, ...action.payload };
      }
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(login.pending, (state) => {
        state.isLoading = true;
        state.error = null;
      })
      .addCase(login.fulfilled, (state, action) => {
        state.isLoading = false;
        state.user = action.payload.user;
        state.token = action.payload.token;
      })
      .addCase(login.rejected, (state, action) => {
        state.isLoading = false;
        state.error = action.payload as string;
      });
  },
});

export const { logout, updateProfile } = authSlice.actions;
export default authSlice.reducer;

import { useAppDispatch, useAppSelector } from '../../store';

function ProfileScreen() {
  const dispatch = useAppDispatch();
  const { user, isLoading } = useAppSelector((state) => state.auth);

  const handleLogout = () => {
    dispatch(logout());
  };

  if (isLoading) {
    return <LoadingSpinner />;
  }

  return (
    <View>
      <Text>{user?.name}</Text>
      <Text>{user?.email}</Text>
      <Button title="Logout" onPress={handleLogout} />
    </View>
  );
}

import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { PersistGate } from 'redux-persist/integration/react';

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  whitelist: ['auth', 'settings'], // Only persist these slices
  blacklist: ['products'], // Don't persist server cache
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['persist/PERSIST', 'persist/REHYDRATE'],
      },
    }),
});

export const persistor = persistStore(store);

// In App.tsx
function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={<SplashScreen />} persistor={persistor}>
        <RootNavigator />
      </PersistGate>
    </Provider>
  );
}

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

interface CartStore {
  items: CartItem[];
  total: number;
  addItem: (item: Omit<CartItem, 'quantity'>) => void;
  removeItem: (id: string) => void;
  updateQuantity: (id: string, quantity: number) => void;
  clearCart: () => void;
}

export const useCartStore = create<CartStore>()(
  persist(
    (set, get) => ({
      items: [],
      total: 0,

      addItem: (item) =>
        set((state) => {
          const existing = state.items.find((i) => i.id === item.id);
          if (existing) {
            return {
              items: state.items.map((i) =>
                i.id === item.id
                  ? { ...i, quantity: i.quantity + 1 }
                  : i
              ),
            };
          }
          return {
            items: [...state.items, { ...item, quantity: 1 }],
          };
        }),

      removeItem: (id) =>
        set((state) => ({
          items: state.items.filter((i) => i.id !== id),
        })),

      updateQuantity: (id, quantity) =>
        set((state) => ({
          items: quantity <= 0
            ? state.items.filter((i) => i.id !== id)
            : state.items.map((i) =>
                i.id === id ? { ...i, quantity } : i
              ),
        })),

      clearCart: () => set({ items: [], total: 0 }),
    }),
    {
      name: 'cart-storage',
      storage: createJSONStorage(() => AsyncStorage),
      partialize: (state) => ({
        items: state.items,
      }),
    }
  )
);

// Computed value subscription
export const useCartTotal = () =>
  useCartStore((state) =>
    state.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
  );

function CartScreen() {
  const items = useCartStore((state) => state.items);
  const total = useCartTotal();
  const { addItem, removeItem } = useCartStore();

  return (
    <FlatList
      data={items}
      renderItem={({ item }) => (
        <CartItemRow
          item={item}
          onIncrement={() => addItem(item)}
          onDecrement={() => removeItem(item.id)}
        />
      )}
      ListFooterComponent={<Text>Total: ${total.toFixed(2)}</Text>}
    />
  );
}

import { create } from 'zustand';
import { devtools, subscribeWithSelector } from 'zustand/middleware';

interface AnalyticsStore {
  events: AnalyticsEvent[];
  track: (event: AnalyticsEvent) => void;
  flush: () => Promise<void>;
}

export const useAnalyticsStore = create<AnalyticsStore>()(
  devtools(
    subscribeWithSelector((set, get) => ({
      events: [],

      track: (event) =>
        set((state) => ({
          events: [...state.events, event],
        })),

      flush: async () => {
        const events = get().events;
        if (events.length > 0) {
          await analyticsApi.sendBatch(events);
          set({ events: [] });
        }
      },
    })),
    { name: 'AnalyticsStore' }
  )
);

// Subscribe to specific state changes
useAnalyticsStore.subscribe(
  (state) => state.events.length,
  (length) => {
    if (length >= 10) {
      useAnalyticsStore.getState().flush();
    }
  }
);

import { makeAutoObservable, runInAction } from 'mobx';
import { observer } from 'mobx-react-lite';

class ProductStore {
  products: Product[] = [];
  selectedCategory: string | null = null;
  isLoading = false;
  searchQuery = '';

  constructor() {
    makeAutoObservable(this);
  }

  // Computed property - auto-derives from state
  get filteredProducts(): Product[] {
    let result = this.products;

    if (this.selectedCategory) {
      result = result.filter((p) => p.category === this.selectedCategory);
    }

    if (this.searchQuery) {
      result = result.filter((p) =>
        p.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }

    return result;
  }

  get categories(): string[] {
    return [...new Set(this.products.map((p) => p.category))];
  }

  setSearchQuery(query: string) {
    this.searchQuery = query;
  }

  setSelectedCategory(category: string | null) {
    this.selectedCategory = category;
  }

  async fetchProducts() {
    this.isLoading = true;
    try {
      const response = await api.getProducts();
      runInAction(() => {
        this.products = response.data;
        this.isLoading = false;
      });
    } catch (error) {
      runInAction(() => {
        this.isLoading = false;
      });
    }
  }
}

const productStore = new ProductStore();
export default productStore;

import { observer } from 'mobx-react-lite';
import productStore from './stores/productStore';

const ProductList = observer(() => {
  const { filteredProducts, isLoading, setSearchQuery, searchQuery } =
    productStore;

  return (
    <View>
      <TextInput
        value={searchQuery}
        onChangeText={setSearchQuery}
        placeholder="Search products..."
        style={styles.searchInput}
      />
      {isLoading ? (
        <LoadingSpinner />
      ) : (
        <FlatList
          data={filteredProducts}
          renderItem={({ item }) => <ProductCard product={item} />}
          keyExtractor={(item) => item.id}
        />
      )}
    </View>
  );
});

import { atom, useAtom, useAtomValue } from 'jotai';
import { atomWithStorage } from 'jotai/utils';
import AsyncStorage from '@react-native-async-storage/async-storage';

// Base atoms
const searchQueryAtom = atom('');
const selectedFiltersAtom = atom<Filter[]>([]);
const pageAtom = atom(1);

// Persistent atom
const recentSearchesAtom = atomWithStorage<string[]>(
  'recent-searches',
  [],
  {
    getItem: async (key) => {
      const item = await AsyncStorage.getItem(key);
      return item ? JSON.parse(item) : [];
    },
    setItem: async (key, value) => {
      await AsyncStorage.setItem(key, JSON.stringify(value));
    },
    removeItem: async (key) => {
      await AsyncStorage.removeItem(key);
    },
  }
);

// Derived atoms
const searchParamsAtom = atom((get) => ({
  query: get(searchQueryAtom),
  filters: get(selectedFiltersAtom),
  page: get(pageAtom),
}));

const searchUrlAtom = atom((get) => {
  const params = get(searchParamsAtom);
  const query = new URLSearchParams({
    q: params.query,
    filters: JSON.stringify(params.filters),
    page: String(params.page),
  });
  return `/api/search?${query}`;
});

// Async atom
const searchResultsAtom = atom(async (get) => {
  const url = get(searchUrlAtom);
  const response = await fetch(url);
  return response.json();
});

// Usage
function SearchScreen() {
  const [query, setQuery] = useAtom(searchQueryAtom);
  const results = useAtomValue(searchResultsAtom);

  return (
    <View>
      <TextInput value={query} onChangeText={setQuery} />
      <SearchResults data={results} />
    </View>
  );
}

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// Model
class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

// Provide the model at the app root
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: const MyApp(),
    ),
  );
}

// Consume in widgets
class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Rebuilds when CounterModel changes
        Text('Count: ${context.watch<CounterModel>().count}'),
        ElevatedButton(
          onPressed: () => context.read<CounterModel>().increment(),
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

// Simple provider
final greetingProvider = Provider<String>((ref) => 'Hello, Riverpod!');

// StateNotifier for mutable state
class AuthNotifier extends StateNotifier<AuthState> {
  AuthNotifier(this._authService) : super(AuthState.initial());

  final AuthService _authService;

  Future<void> login(String email, String password) async {
    state = state.copyWith(isLoading: true);
    try {
      final user = await _authService.login(email, password);
      state = AuthState.authenticated(user);
    } catch (e) {
      state = state.copyWith(
        isLoading: false,
        error: e.toString(),
      );
    }
  }
}

final authProvider =
    StateNotifierProvider<AuthNotifier, AuthState>((ref) {
  return AuthNotifier(ref.watch(authServiceProvider));
});

// Async provider with auto-dispose
final userPostsProvider = FutureProvider.family<List<Post>, String>(
  (ref, userId) async {
    final api = ref.watch(apiServiceProvider);
    return api.getUserPosts(userId);
  },
  name: 'userPosts',
);

// Computed provider
final filteredPostsProvider = Provider.family<List<Post>, String>(
  (ref, searchTerm) {
    final allPosts = ref.watch(allPostsProvider);
    if (searchTerm.isEmpty) return allPosts;
    return allPosts
        .where((p) => p.title.toLowerCase().contains(searchTerm.toLowerCase()))
        .toList();
  },
);

class LoginScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final authState = ref.watch(authProvider);
    final greeting = ref.watch(greetingProvider);

    return Scaffold(
      appBar: AppBar(title: Text(greeting)),
      body: authState.when(
        initial: () => LoginForm(),
        loading: () => const CircularProgressIndicator(),
        authenticated: (user) => Dashboard(user: user),
        error: (message) => ErrorWidget(message: message),
      ),
    );
  }
}

import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:equatable/equatable.dart';

// Events
abstract class TodoEvent extends Equatable {
  const TodoEvent();
  @override
  List<Object?> get props => [];
}

class AddTodo extends TodoEvent {
  final String title;
  const AddTodo(this.title);
  @override
  List<Object?> get props => [title];
}

class ToggleTodo extends TodoEvent {
  final String id;
  const ToggleTodo(this.id);
  @override
  List<Object?> get props => [id];
}

// State
class TodoState extends Equatable {
  final List<Todo> todos;
  final bool isLoading;

  const TodoState({this.todos = const [], this.isLoading = false});

  TodoState copyWith({List<Todo>? todos, bool? isLoading}) {
    return TodoState(
      todos: todos ?? this.todos,
      isLoading: isLoading ?? this.isLoading,
    );
  }

  @override
  List<Object?> get props => [todos, isLoading];
}

// Bloc
class TodoBloc extends Bloc<TodoEvent, TodoState> {
  TodoBloc() : super(const TodoState()) {
    on<AddTodo>(_onAddTodo);
    on<ToggleTodo>(_onToggleTodo);
  }

  Future<void> _onAddTodo(AddTodo event, Emitter<TodoState> emit) async {
    emit(state.copyWith(isLoading: true));
    final newTodo = Todo(id: uuid.v4(), title: event.title);
    emit(state.copyWith(
      todos: [...state.todos, newTodo],
      isLoading: false,
    ));
  }

  void _onToggleTodo(ToggleTodo event, Emitter<TodoState> emit) {
    emit(state.copyWith(
      todos: state.todos.map((todo) {
        if (todo.id == event.id) {
          return todo.copyWith(completed: !todo.completed);
        }
        return todo;
      }).toList(),
    ));
  }
}

// Usage
class TodoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => TodoBloc(),
      child: BlocBuilder<TodoBloc, TodoState>(
        builder: (context, state) {
          if (state.isLoading) {
            return const CircularProgressIndicator();
          }
          return ListView.builder(
            itemCount: state.todos.length,
            itemBuilder: (context, index) {
              final todo = state.todos[index];
              return ListTile(
                title: Text(todo.title),
                leading: Checkbox(
                  value: todo.completed,
                  onChanged: (_) {
                    context.read<TodoBloc>().add(ToggleTodo(todo.id));
                  },
                ),
              );
            },
          );
        },
      ),
    );
  }
}

// Domain layer - entities and use cases
interface UserEntity {
  id: string;
  name: string;
  email: string;
}

// Data layer - repositories and data sources
class UserRepositoryImpl implements UserRepository {
  async getUser(id: string): Promise<UserEntity> {
    const response = await api.get(`/users/${id}`);
    return UserMapper.fromApi(response.data);
  }
}

// Presentation layer - state management
class UserBloc {
  private repository: UserRepository;
  private userState = signal<UserState>({ loading: true });

  async loadUser(id: string) {
    try {
      const user = await this.repository.getUser(id);
      this.userState.set({ user, loading: false });
    } catch (error) {
      this.userState.set({ error, loading: false });
    }
  }
}

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

// Fetch with caching
function useProducts(category: string | null) {
  return useQuery({
    queryKey: ['products', category],
    queryFn: () => api.getProducts(category),
    staleTime: 5 * 60 * 1000, // 5 minutes
    gcTime: 30 * 60 * 1000, // 30 minutes (formerly cacheTime)
    retry: 3,
    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
  });
}

// Mutation with optimistic updates
function useCreateProduct() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (product: NewProduct) => api.createProduct(product),
    onMutate: async (newProduct) => {
      await queryClient.cancelQueries({ queryKey: ['products'] });
      const previous = queryClient.getQueryData(['products']);
      queryClient.setQueryData(['products'], (old: Product[]) => [
        { ...newProduct, id: 'temp-id', status: 'pending' },
        ...(old || []),
      ]);
      return { previous };
    },
    onError: (err, newProduct, context) => {
      queryClient.setQueryData(['products'], context?.previous);
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['products'] });
    },
  });
}

// ❌ Bad - subscribes to entire store
function UserName() {
  const state = useAppSelector((state) => state);
  return <Text>{state.auth.user?.name}</Text>;
}

// ✅ Good - subscribes only to needed slice
function UserName() {
  const userName = useAppSelector((state) => state.auth.user?.name);
  return <Text>{userName}</Text>;
}

// ✅ Best - use shallow equality for objects
function UserProfile() {
  const user = useAppSelector(
    (state) => state.auth.user,
    shallowEqual // Only re-render if user object changes reference
  );
  return <ProfileCard user={user} />;
}

// ❌ Bad - nested state
interface BlogPost {
  id: string;
  title: string;
  author: { id: string; name: string };
  comments: Comment[];
}

// ✅ Good - normalized state
interface NormalizedState {
  posts: { [id: string]: Post };
  authors: { [id: string]: Author };
  comments: { [id: string]: Comment };
  postIds: string[];
}