Generate Redux Slices with TypeScript

This skill generates clean, type-safe Redux Toolkit slices - createSlice, createAsyncThunk, and proper state-management patterns, including TypeScript typing for all state, actions, and payloads, immutable updates via Immer (built into RTK), and a clear separation of synchronous and asynchronous actions. A slice template defines an EntityState interface (items, selectedItem, loading, error, filters), a typed initial state, and an async thunk:

export const fetchEntities = createAsyncThunk(
  'entities/fetchEntities',
  async (params: { page?: number; limit?: number } = {}, { rejectWithValue }) => {
    try {
      const response = await api.getEntities(params);
      return response.data;
    } catch (error) {
      return rejectWithValue(error.response?.data?.message || 'Failed to fetch entities');
    }
  }
);

The slice itself wires synchronous reducers (setSelectedItem, updateFilter, clearError, resetState) alongside extraReducers handling the thunk's pending/fulfilled/rejected cases. CRUD-operation patterns cover create, update, and delete thunks, each using rejectWithValue for consistent error handling. Advanced state patterns cover normalized state via createEntityAdapter (with a selectId and sortComparer, and adapter methods setAll, updateOne, removeOne used inside extraReducers), and selectors - basic state selectors plus memoized selectors built with createSelector that filter and sort entities by search text, category, and sort key.

Use it when generating or reviewing a Redux Toolkit slice - typed state and actions, async thunks for API calls, normalized collections, or memoized selectors. It assumes Redux Toolkit is already the state-management choice - it is not a guide to choosing a state-management library or to plain Redux without RTK.

Given an entity or domain to manage, it produces a typed EntityState interface, a createSlice definition with reducers and extraReducers, CRUD async thunks, and memoized selectors.

Best-practice guidance covers naming actions with a domain/action pattern, providing sensible initial-state defaults to avoid undefined states, including reset/clear actions for state management, and grouping related slices in feature directories. Configuration tips also cover exporting both actions and selectors from each slice file, using consistent naming patterns across slices, adding middleware for logging in development, and using the Redux DevTools extension for debugging state changes.

Built on Redux Toolkit (createSlice, createAsyncThunk, createEntityAdapter, createSelector) with Immer for immutable updates and TypeScript for typing; also notes RTK Query as an option for complex API interactions and Redux DevTools for debugging.

Frontend developers building or maintaining Redux Toolkit state slices in a TypeScript codebase, from a single feature slice to a normalized multi-entity store.