Redux Toolkit

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