Redux Toolkit

Redux Toolkit References

Detailed guides for slices, async operations, selectors, normalization, and TypeScript integration

Overview

This directory contains detailed guides for Redux Toolkit state management patterns. Main SKILL.md provides critical patterns and decision tree. These references offer deep-dives into slice creation, async thunks, memoized selectors, state normalization, and TypeScript best practices.

Quick Navigation

Core Patterns

Reference FileTopics CoveredWhen to Read
slices-patterns.mdcreateSlice, reducers, extraReducers, immer usageCreating slices with actions and reducers
async-patterns.mdcreateAsyncThunk, loading states, error handling, cancellationImplementing async operations (API calls, side effects)
selectors.mdcreateSelector, reselect, memoization, selector compositionOptimizing derived state and preventing unnecessary re-renders
normalization.mdcreateEntityAdapter, normalized state, CRUD operationsManaging relational data (users, posts, comments)
typescript-integration.mdTyped hooks, RootState, AppDispatch, slice typesSetting up type-safe Redux with TypeScript
rtk-query.mdData fetching, caching, API slices, mutations, invalidationImplementing server state with RTK Query

Reading Strategy

For New Projects (Setup)

  1. Read main SKILL.md
  2. MUST read: typescript-integration.md for store setup and typed hooks
  3. MUST read: slices-patterns.md for first slice creation
  4. CHECK: async-patterns.md if calling APIs

For Existing Projects (Adding Features)

  1. Adding simple state? → Read slices-patterns.md
  2. Adding API calls? → Read async-patterns.md
  3. Performance issues with selectors? → Read selectors.md
  4. Managing relational data? → Read normalization.md

For Optimization

  1. Re-renders from selectors? → Read selectors.md for memoization
  2. Complex nested state? → Read normalization.md for flattening
  3. Race conditions in async? → Read async-patterns.md for cancellation

File Descriptions

slices-patterns.md

createSlice patterns and reducer best practices

  • createSlice API with immer
  • Reducer patterns (increment, toggle, add, remove)
  • extraReducers for handling external actions
  • prepare callbacks for action payloads
  • Case reducers organization

async-patterns.md

Async operations with createAsyncThunk

  • createAsyncThunk for API calls
  • pending/fulfilled/rejected handling
  • Error handling patterns
  • Request cancellation
  • Optimistic updates
  • Loading state management

selectors.md

Memoized selectors with reselect

  • createSelector for derived state
  • Selector composition
  • Input selectors vs output selectors
  • Re-computation prevention
  • TypeScript typing for selectors

normalization.md

Normalized state with createEntityAdapter

  • createEntityAdapter setup
  • CRUD operations (add, update, remove)
  • Sorting and filtering entities
  • Selecting single vs multiple entities
  • Relationships between entities

typescript-integration.md

Type-safe Redux with TypeScript

  • Store setup with proper typing
  • RootState and AppDispatch types
  • Typed useSelector and useDispatch hooks
  • Slice state typing
  • Action payload typing
  • Thunk typing

rtk-query.md

Data fetching and caching with RTK Query

  • createApi for API endpoints
  • Queries (read operations) and mutations (write operations)
  • Tag-based cache invalidation
  • Optimistic updates
  • Authentication with prepareHeaders
  • Error handling and retries

Common Patterns Summary

  • Simple state: createSlice with reducers
  • API calls: createAsyncThunk with extraReducers
  • Server state/caching: RTK Query with createApi
  • Derived state: createSelector for memoization
  • Relational data: createEntityAdapter for normalization
  • Type safety: Pre-typed hooks from store configuration

Cross-Reference Map