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