Skip to content

README.md

Latest commit

 

History

History
254 lines (202 loc) · 8 KB

README.md

File metadata and controls

254 lines (202 loc) · 8 KB

Contact Manager - Redux Learning Project

A comprehensive React application designed to help you learn Redux state management through practical implementation. This project demonstrates modern Redux patterns, async operations, and best practices in a real-world application.

🎯 Why This Project for Learning Redux?

This Contact Manager is specifically designed as a Redux learning resource that covers:

  • ✅ Redux Fundamentals - Actions, Reducers, Store, and Dispatch
  • ✅ Async Operations - Redux Thunk for API calls
  • ✅ Modern Redux Patterns - Loading states, error handling, and optimistic updates
  • ✅ Real-world Scenarios - CRUD operations with proper state management
  • ✅ Best Practices - Clean code structure and separation of concerns

🚀 Quick Start

# Clone and install
git clone https://github.com/devmahmud/ContactManager.git
cd ContactManager
npm install

# Start learning
npm run dev

📚 Redux Learning Path

1. Understanding the Store Structure

// src/store.js - Redux store configuration
{
  contact: {
    contacts: [],    // All contacts
    contact: {},     // Single contact for editing
    loading: false,  // Loading state for async operations
    error: null      // Error handling
  }
}

2. Actions - What Happens

// src/actions/contactActions.js
export const getContacts = () => async (dispatch) => {
  dispatch({ type: 'GET_CONTACTS_START' });     // Loading starts
  try {
    const response = await axios.get('/users');
    dispatch({ type: 'GET_CONTACTS_SUCCESS', payload: response.data });
  } catch (error) {
    dispatch({ type: 'GET_CONTACTS_ERROR', payload: error.message });
  }
};

3. Reducers - How State Changes

// src/reducers/contactReducer.js
export default function (state = initialState, action) {
  switch (action.type) {
    case 'GET_CONTACTS_START':
      return { ...state, loading: true, error: null };
    case 'GET_CONTACTS_SUCCESS':
      return { ...state, contacts: action.payload, loading: false };
    case 'GET_CONTACTS_ERROR':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

4. Components - How to Use Redux

// Using Redux in React components
import { useSelector, useDispatch } from 'react-redux';

function Contacts() {
  const dispatch = useDispatch();
  const { contacts, loading, error } = useSelector(state => state.contact);
  
  useEffect(() => {
    dispatch(getContacts()); // Dispatch action
  }, [dispatch]);
  
  // Component renders based on Redux state
}

🛠️ Tech Stack & Learning Focus

Technology Purpose Learning Value
Redux 5.0.1 State Management Core Redux concepts and patterns
Redux Thunk Async Operations Handling API calls and side effects
React 18.3.1 UI Framework Modern React with hooks
React Router v6 Navigation Client-side routing
Vite Build Tool Modern development experience

📁 Redux-Focused Project Structure

src/
├── store.js              # Redux store configuration
├── actions/              # Action creators (async operations)
│   └── contactActions.js # CRUD operations with Redux Thunk
├── reducers/             # State reducers
│   ├── contactReducer.js # Contact state management
│   └── index.js          # Root reducer
└── components/           # React components using Redux
    ├── contacts/         # Contact CRUD components
    └── layout/           # Shared components

🔄 Redux Patterns Demonstrated

1. Loading States

// Actions dispatch loading states
dispatch({ type: 'GET_CONTACTS_START' });

// Components show loading UI
{loading && <LoadingSpinner />}

2. Error Handling

// Reducers handle errors
case 'GET_CONTACTS_ERROR':
  return { ...state, loading: false, error: action.payload };

// Components display errors
{error && <div className="alert alert-danger">{error}</div>}

3. Optimistic Updates

// Immediate UI updates with rollback on error
case 'ADD_CONTACT_SUCCESS':
  return { ...state, contacts: [action.payload, ...state.contacts] };

4. Async Operations with Thunk

// Redux Thunk for async actions
export const addContact = (contact) => async (dispatch) => {
  dispatch({ type: 'ADD_CONTACT_START' });
  try {
    const response = await axios.post('/users', contact);
    dispatch({ type: 'ADD_CONTACT_SUCCESS', payload: response.data });
  } catch (error) {
    dispatch({ type: 'ADD_CONTACT_ERROR', payload: error.message });
  }
};

🎨 Features for Redux Learning

CRUD Operations

  • ✅ Create - Add new contacts with Redux state updates
  • ✅ Read - Fetch and display contacts from Redux store
  • ✅ Update - Edit contacts with optimistic updates
  • ✅ Delete - Remove contacts with confirmation modal

State Management Patterns

  • ✅ Loading States - Show spinners during async operations
  • ✅ Error Handling - Display errors from Redux state
  • ✅ Form Management - Controlled components with Redux
  • ✅ Navigation - Route-based state management

Modern Redux Features

  • ✅ Redux Thunk - Async action creators
  • ✅ useSelector/useDispatch - Modern React-Redux hooks
  • ✅ Immutable Updates - Proper state immutability
  • ✅ Action Types - Consistent action naming

🚀 Available Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm run deploy   # Deploy to GitHub Pages

🌐 Deployment

GitHub Pages

The application is configured for automatic deployment to GitHub Pages:

npm run deploy

Live Demo: https://devmahmud.github.io/ContactManager

Deployment Features

  • ✅ Automatic Build - Builds before deployment
  • ✅ Client-side Routing - 404.html handles React Router
  • ✅ Asset Optimization - Proper base path configuration
  • ✅ Jekyll Bypass - .nojekyll file prevents Jekyll processing

🌐 API Integration

Uses JSONPlaceholder API for realistic data:

  • GET /users - Fetch all contacts
  • POST /users - Create new contact
  • PUT /users/:id - Update contact
  • DELETE /users/:id - Delete contact

📖 Learning Resources

Redux Concepts Covered

  1. Store - Single source of truth
  2. Actions - Plain objects describing what happened
  3. Reducers - Pure functions that specify how state changes
  4. Dispatch - Method to trigger state changes
  5. Selectors - Functions to extract data from state

Advanced Patterns

  1. Redux Thunk - Middleware for async operations
  2. Loading States - Managing async operation states
  3. Error Boundaries - Handling and displaying errors
  4. Optimistic Updates - Immediate UI feedback
  5. State Normalization - Efficient data structure

🎯 Learning Objectives

After studying this project, you'll understand:

  • ✅ How to structure Redux applications
  • ✅ How to handle async operations with Redux Thunk
  • ✅ How to manage loading and error states
  • ✅ How to integrate Redux with React components
  • ✅ How to implement CRUD operations with Redux
  • ✅ How to write clean, maintainable Redux code

🤝 Contributing

This is a learning project! Feel free to:

  • Add new Redux patterns
  • Improve error handling
  • Add more complex state management scenarios
  • Create additional learning examples

📝 License

MIT License - Feel free to use this for learning and teaching Redux!

Start your Redux journey today! 🚀

This project is designed to be a comprehensive learning resource for Redux. Each component and pattern is implemented with educational value in mind.