https://github.com/viktorsvertoka/goit-react-woolf-hw-07-phonebook
Home task for React course📘
https://github.com/viktorsvertoka/goit-react-woolf-hw-07-phonebook
goit goit-react-woolf-hw-07-phonebook javascript react redux teilwinds-css
Last synced: 23 days ago
JSON representation
Home task for React course📘
- Host: GitHub
- URL: https://github.com/viktorsvertoka/goit-react-woolf-hw-07-phonebook
- Owner: ViktorSvertoka
- Created: 2024-02-29T15:34:06.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-03T22:16:58.000Z (about 1 year ago)
- Last Synced: 2024-04-14T06:32:28.375Z (about 1 year ago)
- Topics: goit, goit-react-woolf-hw-07-phonebook, javascript, react, redux, teilwinds-css
- Language: JavaScript
- Homepage: https://viktorsvertoka.github.io/goit-react-woolf-hw-07-phonebook/
- Size: 12.5 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Критерії приймання
- Створений репозиторій `goit-react-woolf-hw-07-phonebook`
- При здачі фiнального завдання є посилання: на вихідні файли та робочі сторінки
кожного завдання на `GitHub Pages`
- Використана бібліотека `Redux Toolkit`
## Книга контактів
Виконайте рефакторинг коду програми «Книга контактів». Видали код, що відповідає
за зберігання та читання контактів з локального сховища, та додай взаємодію з
бекендом для зберігання контактів.
### Бекенд
Створи свій персональний бекенд для розробки за допомогою UI-сервісу
[mockapi.io](https://mockapi.io). Зареєструйся, використовуючи свій обліковий
запис GitHub.
Створи ресурс `contacts`, щоб отримати ендпоінт `/contacts`. Використовуй
конструктор ресурсу та опиши об'єкт контакту як на ілюстрації.
### Форма стану
Додай у стан Redux обробку індикатора завантаження та помилки. Для цього зміни
форму стану.
```
{
contacts: {
items: [],
isLoading: false,
error: null
},
filter: ""
}
```
### Операції
Використовуй функцію
[createAsyncThunk](https://redux-toolkit.js.org/api/createAsyncThunk) або
[RTK Query](https://redux-toolkit.js.org/rtk-query/overview) для взаємодії з
бекендом та асинхронними запитами. Обробку екшенів та зміну даних у стані Redux
зроби за допомогою `createSlice`.
### Оголоси наступні операції:
- `fetchContacts` - одержання масиву контактів (метод GET) запитом. Базовий тип
екшену `"contacts/fetchAll"`.
- `addContact` - додавання контакту (метод POST). Базовий тип екшену
`"contacts/addContact"`.
- `deleteContact` - видалення контакту (метод DELETE). Базовий тип екшену
`"contacts/deleteContact"`.
### Фінальний результат
