📱 React Homework 06 — Phonebook with Redux Toolkit

This project is an upgraded version of the Phonebook application, rebuilt using Redux Toolkit instead of local React state.

The main goal of this homework is to practice global state management, Redux slices, and state persistence using Redux Persist.

🔗 Project Links

• GitHub Repository:
  https://github.com/kutluhangil/goit-react-hw-06
• Live Demo (Vercel):
  https://goit-react-hw-06-psi-gold.vercel.app/

🛠️ Technologies & Libraries

• React
• Vite
• Redux Toolkit
• React Redux
• Redux Persist
• Formik & Yup
• nanoid
• CSS Modules
• Prettier

📦 Installed Dependencies

npm install @reduxjs/toolkit react-redux redux-persist
npm install formik yup nanoid
  

📂 Project Structure

src
 ├── components
 │   ├── Contact
 │   ├── ContactForm
 │   ├── ContactList
 │   └── SearchBox
 ├── redux
 │   ├── contactsSlice.js
 │   ├── filtersSlice.js
 │   └── store.js
 ├── App.jsx
 ├── App.module.css
 └── main.jsx
  

📖 Application Overview

The Phonebook application allows users to add, delete, and filter contacts. All application state is managed globally via Redux Toolkit.

✨ Core Features

• Add new contacts with validation
• Delete existing contacts
• Filter contacts by name
• Persist data using localStorage
• Premium UI built with CSS Modules

🧠 Redux State Structure

{
  contacts: {
    items: []
  },
  filters: {
    name: ""
  }
}
  

🔹 Redux Slices

Contacts Slice

• Add contact
• Delete contact
• Select contacts list

Filters Slice

• Update name filter
• Select filter value

💾 State Persistence

Contacts are persisted using Redux Persist. The state is automatically saved to and restored from localStorage.

🔄 Data Flow

1. User interacts with UI
2. Redux action is dispatched
3. Reducer updates the store
4. Subscribed components re-render

🪜 Homework Goals Achieved

• Redux Toolkit integration
• Multiple Redux slices
• Selectors instead of prop drilling
• Persistent global state
• Clean, scalable architecture

Happy coding 🚀 — React + Redux Toolkit