frontend-state-management

SKILL.md

Frontend State Management

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

Overview

Implement scalable state management solutions using modern patterns and libraries to handle application state, side effects, and data flow across components.

When to Use

Complex application state

Multiple components sharing state

Predictable state mutations

Time-travel debugging needs

Server state synchronization

Quick Start

Minimal working example:

// store/userSlice.ts
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';

interface User {
  id: number;
  name: string;
  email: string;
}

interface UserState {
  items: User[];
  loading: boolean;
  error: string | null;
}

const initialState: UserState = {
  items: [],
  loading: false,
  error: null
};

export const fetchUsers = createAsyncThunk(
  'users/fetchUsers',
  async (_, { rejectWithValue }) => {
    try {
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide
Contents

Redux with Redux Toolkit (React)
Redux with Redux Toolkit (React)

Zustand (Lightweight State Management)
Zustand (Lightweight State Management)

Context API + useReducer
Context API + useReducer

MobX (Observable State)
MobX (Observable State)

Best Practices

✅ DO

Follow established patterns and conventions

Write clean, maintainable code

Add appropriate documentation

Test thoroughly before deploying

❌ DON'T

Skip testing or validation

Ignore error handling

Hard-code configuration values

1d:[