Виконай рефакторинг коду застосунку «Книга контактів» із домашнього завдання попереднього модуля.
Видали код, що відповідає за зберігання та читання контактів з локального сховища, тобто код пов’язаний з Redux Persist. Додай взаємодію з бекендом для зберігання контактів.
Створи свій персональний бекенд для розробки за допомогою UI-сервісу mockapi.io. Зареєструйся використовуючи свій обліковий запис GitHub та обери безкоштовний план.
Переглянь демо-відео,
Додай у стан Redux обробку індикатора завантаження та помилки HTTP-запитів. Для цього зміни форму стану слайсу контактів, додавши властивості loading та error. { contacts: { items: [], loading: false, error: null }, filters: { name: "" } }
В папці redux створи файл contactsOps.js для зберігання асинхронних генераторів екшенів.
Використовуй функцію createAsyncThunk для оголошення операцій. Для виконання HTTP-запитів використай бібліотеку axios.
Оголоси наступні операції:
fetchContacts - одержання масиву контактів (метод GET) запитом. Базовий тип екшену це рядок "contacts/fetchAll". addContact - додавання нового контакту (метод POST). Базовий тип екшену це рядок "contacts/addContact". deleteContact - видалення контакту по ID (метод DELETE). Базовий тип екшену це рядок "contacts/deleteContact".
Для коректного опрацювання помилки HTTP-запиту в середині операцій, використай конструкцію try...catch, та у блоці catch поверни результат виклику методу thunkAPI.rejectWithValue.
Обробку усіх трьох екшенів (fulfilled, rejected, pending) та зміну даних у стані Redux зроби у властивості extraReducers слайсу контактів, а от властивість reducers з нього — прибери.
Після додавання властивостей loading та error у слайс контактів, виникне проблема оптимізаціі фільтрування контактів, так як вираз фільтрування буде виконуватись не тільки при зміні контактів або фільтру, а також при зміні loading та error.
Для вирішення цієї задачі:
У файлі слайсу контактів contactsSlice.js створи та експортуй мемоізований селектор selectFilteredContacts за допомогою функції createSelector. Селектор повинен залежати від поточних масиву контактів і значення фільтра, та повертати відфільтрований масив контактів. Селектор selectFilteredContacts імпортується у компонент списка контактів ContactList.jsx та використовується у useSelector.
Оскільки твоя колекція контактів тепер зберігається на бекенді, то:
При завантаженні додатка запит на бекенд для отримання масиву контактів зроби саме в компоненті Арр. При створенні нового контакту додавати йому унікальний ідентифікатор більше не потрібно, це буде робити сам бекенд і повертати у відповідь об’єкт нового контакту.
Виконай рефакторинг коду твого застосунку «Книга контактів» із домашнього завдання третього модуля. Додай управління станом за допомогою бібліотеки Redux Toolkit, замість локального React стану.
Створи папку src/redux для зберігання файлів, пов'язаних із логікою Redux: store.js - файл створення стору contactsSlice.js - файл слайсу для контактів filtersSlice.js - файл слайсу для фільтрів
Нехай початковий стан Redux виглядає наступним чином. { contacts: {items: []}, filters: {name: ""}} Тут ми виділимо два слайси - контакти (поле contacts) і фільтри (поле filters).
У файлі contactsSlice.js оголоси слайс контактів, використовуючи функцію createSlice().
Екшени слайса для використання в dispatch:
addContact - додавання нового контакту до властивості items deleteContact - видалення контакту за id з властивості items
Оголоси функції-селектори для використання в useSelector:
selectContacts - повертає список контактів з властивості items.
З файла слайса експортуй редюсер, а також його екшени і селектори.
У файлі filtersSlice.js оголоси слайс фільтра, використовуючи функцію createSlice().
Екшени слайса для використання в dispatch:
changeFilter - зміна значення фільтра в властивості name
Оголоси функції-селектори для використання в useSelector:
selectNameFilter - повертає значення фільтра з властивості name.
З файла слайса експортуй редюсер, а також його екшени і селектори.
Зв'яжи React-компоненти з Redux-логікою за допомогою хуків useSelector та useDispatch бібліотеки React Redux.
Усі компоненти, крім карточки контакту Contact у списку контактів ContactList, не повинні приймати жодних пропсів. Замість цього, компоненти мають використовувати хук useSelector та функції-селектори слайсів для отримання необхідних їм значень.
Для відправки екшенів компоненти використовують хук useDispatch та оголошені раніше екшени слайсів:
Форма ContactsForm відправляє екшен додавання контакту при сабміті Карточка контакту Contact відправляє екшен видалення контакту при кліку по кнопці видалення Поле фільтра SearchBox відправляє екшен зміни фільтра при введенні в текстове поле
Використай бібліотеку Redux Persist для збереження масиву контактів у локальному сховищі.
У файлі store.js:
Створи конфігурацію для збереження поля items зі слайса контактів. Використовуй persistReducer, щоб застосувати конфігурацію до редюсера слайса контактів. Використовуй persistStore для створення persistor для PersistGate.#