Redux: AI-Optimized Technical Reference

Critical Decision Context

When Redux is Required vs Overkill

• Overkill: Todo apps, simple state, auth/theme-only apps
• Required: Complex state interactions, debugging race conditions, "why did updating user profile clear shopping cart" scenarios
• Breaking Point: When Context API causes everything to re-render on state changes

Real-World Migration Timeline

• Disciplined Team: 2-3 weeks for medium app
• Sprint-Based: 6 months
• Critical Path: Start with configureStore replacement (backwards compatible), then convert slice by slice
• Failure Mode: Converting everything at once breaks checkout flows

Technical Specifications

Performance Thresholds

• Bundle Size: 47KB (Redux + RTK) vs 8KB (Zustand) vs 0KB (Context)
• Critical Failure: useSelector(state => state) in high-render components causes 5-second scroll delays
• Re-render Impact: Context re-renders all consumers, Redux only re-renders components with changed selected state

Production Configuration

Redux Toolkit Setup (Required)

// Modern approach - generates boilerplate automatically
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1  // Immer handles immutability
    }
  }
})

Legacy Redux (Avoid)

// 10+ lines for counter increment - maintenance nightmare
const INCREMENT = 'counter/increment'
const increment = () => ({ type: INCREMENT })
// Additional reducer boilerplate...

Critical Performance Requirements

• Selector Specificity: Use useSelector with specific selectors, never (state) => state.everything
• Batching: RTK's autoBatchEnhancer prevents 47 re-renders from rapid actions
• Common Failure: Grabbing entire state tree in header components causes keystroke lag

Debugging and Development Intelligence

Redux DevTools Capabilities

• Time-travel debugging: Trace every state change
• Action replay: Reproduce bugs exactly
• State inspection: See exact state at any point
• Critical for: Race condition debugging, complex state interaction failures

TypeScript Integration Status

• Redux Toolkit 2.0: Fixed TypeScript support with pre-typed hooks
• Legacy Redux: PhD in TypeScript generics required
• Current State: Use pre-typed hooks, stop fighting generics

Tool Comparison Matrix

Tool	Learning Curve	Debugging	Performance	Complex State	Bundle Size
Redux + RTK	2 weeks hate-to-love	DevTools godlike	Fast with proper selectors	Excels	47KB
Zustand	Weekend project	console.log debugging	Fast out of box	Good luck debugging	8KB
Context API	React knowledge sufficient	Hope and pray	Re-renders everything	You're fucked	0KB
MobX	Magical until broken	MobX DevTools exist	Fast until observables fucked	Hope magic continues	76KB

Migration Strategy and Risks

Incremental Migration Path

1. Replace createStore with configureStore (literal function swap)
2. Convert reducers to slices one at a time
3. Use migration codemods: npx @reduxjs/rtk-codemods createSliceBuilder ./src

Migration Risks

• Hydration Failures: SSR state mismatch with redux-persist
• Codemod Edge Cases: Always backup before running automated transformations
• Breaking Changes: Converting everything simultaneously breaks critical flows

Data Fetching Decision Tree

RTK Query vs Alternatives

• RTK Query: Already using Redux, want integration, aggressive caching (sometimes too much)
• React Query: Simpler, bigger ecosystem, more caching control, not using Redux
• SWR: Similar to React Query, smaller bundle

Common Async Patterns

• RTK includes Redux Thunk: Handles 90% of async use cases
• Redux Saga: Only for complex async orchestration (most apps don't need)
• Async Thunk: Watch tutorials twice - async always breaks in production

Production Failure Modes

Critical Warnings

• State Mutation: Must dispatch actions, direct mutation breaks everything
• Selector Performance: Bad selectors cause 50 component re-renders per keystroke
• SSR Hydration: Client/server state mismatch with persistence
• Action Type Typos: "INCREMENT" vs "INCREMNET" causes career questioning

Breaking Points

• UI Complexity: 1000+ spans break debugging for distributed transactions
• Team Scale: 50,000 components make migration harder than learning Kubernetes
• State Complexity: When debugging "why this component updated" becomes impossible

Resource Requirements

Learning Investment

• Initial Hatred Period: 1 week
• Competency: 2-3 weeks for patterns
• Mastery: Understanding when not to use Redux

Team Expertise Requirements

• Redux Patterns: Action → Reducer → New State flow
• Selector Optimization: Prevent performance disasters
• DevTools Proficiency: Time-travel debugging skills
• Migration Strategy: Incremental conversion methodology

Essential Resources for Implementation

Primary Documentation

• Redux Toolkit Tutorial: Skip main Redux docs, start here
• RTK Migration Guide: Actually helpful, shows exact changes
• React-Redux Hooks: Forget connect API, use hooks

Debugging and Performance

• Redux DevTools Extension: Install first - main reason to use Redux
• Redux Performance Guide: Read when app starts lagging
• Reselect: Memoized selectors prevent unnecessary re-renders

Community Support

• Redux GitHub Discussions: Mark Erikson answers questions
• Reactiflux Discord #redux: Real-time 2am debugging help
• RTK vs React Query Discussion: Honest pros/cons from RTK team

Production Examples

• Real World Example: Production-like app, not todo list
• Next.js with Redux: SSR setup without hydration failures

Current Technology Status

Version Information

• Redux 5.0 & RTK 2.0: Released December 4, 2023
• Features: Proper TypeScript support, ESM compatibility, performance improvements
• Migration: RTK 2.0 codemods available for automated conversion

Ecosystem Maturity

• Facebook Usage: Still using Redux (50,000 components migration difficulty)
• Team Migration Failures: 6-month attempts returning to Redux after race condition bugs
• Developer Experience: RTK significantly improved from Redux legacy nightmare