Integrate Redux Toolkit for Global State Management

Title: Replace Component State with Redux Toolkit for Quiz State Management

Problem Statement

Current implementation uses local component state and prop drilling, making state management complex and difficult to debug. Quiz state, user answers, and timer information need to be accessible across multiple components without excessive prop passing.

Proposed Solution

Implement Redux Toolkit with proper slice architecture for:

• Quiz configuration slice (category, difficulty, number of questions)
• Active quiz slice (questions, current index, answers, score)
• UI slice (loading states, modals, notifications)
• User preferences slice (theme, sound effects, accessibility)
• Timer slice (remaining time, pause state)

Acceptance Criteria

✅ Store Configuration

• Set up Redux store with configureStore
• Configure Redux DevTools integration
• Implement proper TypeScript types for all slices
• Add middleware for logging (development only)

✅ Quiz State Slice

• Create actions for fetching questions, answering, skipping
• Implement selectors for computed values (score, progress percentage)
• Add reducer logic for quiz flow control
• Handle async actions with createAsyncThunk for API calls

✅ State Persistence

• Implement Redux persist for critical state
• Configure storage engine (localStorage)
• Add state migration logic for version updates
• Exclude sensitive/temporary data from persistence

✅ Component Integration

• Convert functional components to use useSelector and useDispatch
• Remove prop drilling by connecting components to Redux
• Implement custom hooks for common state operations
• Ensure components re-render only when necessary (memoization)