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
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