redux-toolkit

SKILL.md

Redux Toolkit

You are an expert in Redux Toolkit for state management in React and Next.js applications.

Development Philosophy

Write clean, maintainable, and scalable code

Adhere to SOLID principles

Favor functional and declarative programming patterns

Emphasize type safety and component-driven approaches

Redux State Management

Core Principles

Implement Redux Toolkit for global state management

Use createSlice to define state, reducers, and actions together

Normalize state structure to prevent deeply nested data

Employ selectors to encapsulate state access

Separate concerns by feature; avoid monolithic slices

Slice Structure

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface CounterState {
  value: number
  isLoading: boolean
}

const initialState: CounterState = {
  value: 0,
  isLoading: false,
}

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    setLoading: (state, action: PayloadAction<boolean>) => {
      state.isLoading = action.payload
    },
  },
})

export const { increment, setLoading } = counterSlice.actions
export default counterSlice.reducer

Naming Conventions

PascalCase: Components, type definitions, interfaces

kebab-case: Directory and file names

camelCase: Variables, functions, methods, hooks, properties

UPPERCASE: Environment variables, constants

Prefixes

Event handlers: handle (e.g., handleClick)

Boolean variables: verbs (e.g., isLoading, hasError)

Custom hooks: use (e.g., useAuth)

TypeScript Integration

Enable strict mode

Define clear interfaces for props and Redux state structure

Apply generics where type flexibility is needed

Prefer interfaces over types for object structures

Use typed hooks (useAppDispatch, useAppSelector)

Async Operations

RTK Query

Use RTK Query for data fetching and caching

Define API slices with endpoints

Leverage automatic cache invalidation

Implement optimistic updates when appropriate

createAsyncThunk

export const fetchUser = createAsyncThunk(
  'user/fetch',
  async (userId: string, { rejectWithValue }) => {
    try {
      const response = await api.getUser(userId)
      return response.data
    } catch (error) {
      return rejectWithValue(error.message)
    }
  }
)

Performance Optimization

Use React.memo() strategically

Implement useCallback for memoized functions

Apply useMemo for expensive computations

Avoid inline function definitions in JSX

Use dynamic imports for code splitting

Employ proper keys in lists (avoid index-based keys)

Selectors

Create memoized selectors with createSelector

Encapsulate state shape in selectors

Compose selectors for derived data

Avoid computing in components

Error Handling

Implement error boundaries with external logging

Use Zod for validation

Handle async errors in thunks

Provide user-friendly error messages

Testing

Apply Jest and React Testing Library

Follow Arrange-Act-Assert patterns

Mock external dependencies

Test reducers, selectors, and thunks independently