🚀 Redux CRUD Operations

A collection of CRUD applications built with React & Redux Toolkit

A collection of Redux Toolkit CRUD applications demonstrating modern state management, asynchronous operations, and best practices for building scalable React applications.

---

📖 Project Overview

This repository contains multiple CRUD (Create, Read, Update, Delete) projects built using React and Redux Toolkit.

The main objective is to understand:

• Redux Toolkit
• Redux Store
• Slices
• Reducers
• Actions
• Async Thunks
• API Integration
• CRUD Operations
• State Management Best Practices

This repository serves as both a learning resource and a reference for future Redux projects.

---

✨ Features

• ✅ Create Data
• ✅ Read Data
• ✅ Update Existing Data
• ✅ Delete Data
• ✅ Global State Management
• ✅ Redux Toolkit
• ✅ Async API Calls
• ✅ Loading State Handling
• ✅ Error Handling
• ✅ Clean Folder Structure
• ✅ Reusable Components

---

🛠 Tech Stack

Frontend

• React
• Redux Toolkit
• React Redux
• JavaScript (ES6+)
• Vite
• CSS

State Management

• Redux Toolkit
• Redux Store
• createSlice
• createAsyncThunk

---

⚙️ Installation

Clone the repository

git clone https://github.com/rahmancoder/mustafiz-redux-projects1.git

Move into the project

cd mustafiz-redux-projects1

Install dependencies

npm install

Start development server

npm run dev

---

🚀 Learning Topics Covered

This repository demonstrates:

• Redux Fundamentals
• Redux Toolkit
• Store Configuration
• Reducers
• Actions
• Payload
• Selectors
• Dispatch
• createSlice
• createAsyncThunk
• Async API Requests
• CRUD Operations
• State Updates
• React Hooks
• useSelector
• useDispatch
• Component Communication

---

📚 CRUD Workflow

Create
   │
   ▼
Store Updated
   │
   ▼
Read Data
   │
   ▼
Edit Data
   │
   ▼
Update Store
   │
   ▼
Delete Data

---

💡 Redux Data Flow

Component
    │
Dispatch Action
    │
    ▼
Reducer
    │
    ▼
Redux Store
    │
    ▼
Updated State
    │
    ▼
Component Re-renders

---

🎯 What You'll Learn

• Modern Redux Toolkit
• State Management
• API Integration
• Async Programming
• CRUD Logic
• React Hooks
• Project Structure
• Clean Code Practices

---

📦 Available Scripts

npm run dev

Runs the app in development mode.

npm run build

Builds the application for production.

npm run preview

Preview the production build locally.

---

🤝 Contributing

Contributions are welcome!

If you'd like to improve this project:

1. Fork the repository
2. Create a new branch

git checkout -b feature-name

3. Commit your changes

git commit -m "Added new feature"

4. Push your branch

git push origin feature-name

5. Open a Pull Request

---

👨‍💻 Author

MD MUSTAFIZUR RAHMAN

• GitHub: https://github.com/rahmancoder

---

⭐ Support

If you found this repository helpful, consider giving it a ⭐ on GitHub.

It helps others discover the project and motivates further development.

---

📄 License

This project is licensed under the MIT License.

---

Happy Coding ❤️

Made with React ⚛️ & Redux Toolkit 🚀