🎓 Redux Saga Learning Project - CodeGym 2025

📋 Giới thiệu

Dự án học tập về Redux Saga - một middleware mạnh mẽ để xử lý side effects trong React/Redux.

🎯 Mục tiêu học tập

• Hiểu cách hoạt động của Redux Saga
• Biết cách xử lý async operations
• Nắm được các Saga effects cơ bản
• Hiểu flow xử lý lỗi trong Redux Saga

🚀 Tính năng demo

• ✅ Đăng nhập với xác thực
• ✅ Hiển thị danh sách người dùng từ API
• ✅ Xử lý error states
• ✅ Loading states
• ✅ Giao diện responsive

🛠️ Công nghệ sử dụng

• React 19 - UI Framework
• Redux 5 - State management
• Redux Saga 1.3 - Side effects management
• React Router 7 - Routing
• Vite 7 - Build tool
• Axios - HTTP client

📦 Cài đặt và chạy

# Cài đặt dependencies
npm install

# Chạy development server
npm run dev

# Build production
npm run build

🔑 Thông tin đăng nhập

• Username: admin
• Password: letmein

� Kiến thức cần nắm trước

• JavaScript ES6+ (Generator functions)
• React hooks (useState, useEffect)
• Redux cơ bản (actions, reducers, store)

� Nội dung học tập

Xem chi tiết trong file LEARNING_GUIDE.md

📁 Cấu trúc dự án

├── src/
│   ├── App.jsx           # Main App component
│   ├── main.jsx          # Entry point
│   └── index.css         # Global styles
├── components/
│   ├── Login.jsx         # Login component
│   ├── Login.css         # Login styles
│   ├── User.jsx          # User list component
│   └── User.css          # User styles
├── redux/
│   ├── store.js          # Store configuration
│   ├── reducer.js        # Root reducer
│   └── action.js         # Action types
├── saga/
│   └── userSaga.js       # Saga functions
├── store.modern.js       # Modern store example
└── LEARNING_GUIDE.md     # Chi tiết hướng dẫn học

⚠️ Lưu ý quan trọng (2025)

🔧 Về phiên bản hiện tại

• Dự án này sử dụng createStore (deprecated) cho mục đích giảng dạy
• Trong dự án thực tế năm 2025, nên sử dụng configureStore từ Redux Toolkit
• Xem file store.modern.js để tham khảo cách modern

📈 Roadmap học tập

1. Bước 1: Nắm vững Redux Saga cơ bản (dự án này)
2. Bước 2: Học Redux Toolkit + RTK Query
3. Bước 3: Tìm hiểu React Query / TanStack Query
4. Bước 4: So sánh và chọn tool phù hợp cho dự án

🔗 Tài liệu tham khảo

• Redux Saga Official Docs
• Redux Toolkit
• React Query

🌐 API Demo

• JSONPlaceholder: https://jsonplaceholder.typicode.com/users

📝 Bài tập thực hành

Xem chi tiết trong LEARNING_GUIDE.md

---

Tạo bởi: CodeGym Vietnam
Cập nhật: Tháng 7, 2025
Mục đích: Giảng dạy Redux Saga