https://github.com/eujinnlucashow/goit-react-hw-07-phonebook

⚛️ goit-react-hw-07-phonebook
https://github.com/eujinnlucashow/goit-react-hw-07-phonebook

axios createasyncthunk createslice delete get mockapi-io post react

Last synced: 15 days ago
JSON representation

⚛️ goit-react-hw-07-phonebook

• Host: GitHub
• URL: https://github.com/eujinnlucashow/goit-react-hw-07-phonebook
• Owner: EuJinnLucaShow
• Created: 2023-06-20T19:31:38.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-06-23T11:39:24.000Z (over 1 year ago)
• Last Synced: 2024-12-16T06:13:01.610Z (18 days ago)
• Topics: axios, createasyncthunk, createslice, delete, get, mockapi-io, post, react
• Language: JavaScript
• Homepage: https://eujinnlucashow.github.io/goit-react-hw-07-phonebook/
• Size: 5.21 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Використовуй цей

[шаблон React-проекту](https://github.com/goitacademy/react-homework-template#readme)

як стартову точку своєї програми.

# Критерії приймання

- Створений репозиторій `goit-react-hw-07-phonebook`

- Використана бібліотека `Redux Toolkit`

## Телефонна книга

Виконай рефакторинг коду застосунку «Телефонна книга». Видали код, який

відповідає за зберігання та читання контактів з локального сховища, та додай

роботу з бекендом для зберігання контактів.

Створи бекенд для розробки за допомогою UI-сервісу

[mockapi.io](https://mockapi.io). Зареєструйся, використовуючи свій обліковий

запис GitHub.

Створи ресурс `contacts`, щоб отримати ендпоінт `/contacts`. Використовуй

конструктор ресурсу та опиши об'єкт контакту як на ілюстрації.



Форма стану

Додай у стан Redux обробку індикатора завантаження та помилки. Для цього зміни форму стану.

```html

{

  contacts: {

    items: [],

    isLoading: false,

    error: null

  },

  filter: ""

}

```

Операції

Використовуй функцію [createAsyncThunk](https://redux-toolkit.js.org/api/createAsyncThunk) для оголошення асинхронних генераторів екшенів та виконання HTTP-запитів. Обробку екшенів та зміну даних у стані Redux зроби за допомогою [createSlice](https://redux-toolkit.js.org/api/createSlice).

Оголоси наступні операції:

- `fetchContacts` - одержання масиву контактів (метод GET) запитом. Базовий тип екшену `"contacts/fetchAll"`.

- `addContact` - додавання контакту (метод POST). Базовий тип екшену `"contacts/addContact"`.

- `deleteContact` - видалення контакту (метод DELETE). Базовий тип екшену `"contacts/deleteContact"`.