Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gudzsv/goit-react-hw-06
goit-react-hw-06
https://github.com/gudzsv/goit-react-hw-06
css goit-react-hw-06 js jsx react redux-toolkit
Last synced: about 1 month ago
JSON representation
goit-react-hw-06
- Host: GitHub
- URL: https://github.com/gudzsv/goit-react-hw-06
- Owner: gudzsv
- License: mit
- Created: 2024-06-10T21:37:53.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-06-12T21:24:29.000Z (7 months ago)
- Last Synced: 2024-06-14T02:34:01.253Z (7 months ago)
- Topics: css, goit-react-hw-06, js, jsx, react, redux-toolkit
- Language: JavaScript
- Homepage: https://goit-react-hw-06-vert-nu.vercel.app
- Size: 54.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Книга контактів `goit-react-hw-06`
Виконай рефакторинг коду твого застосунку «Книга контактів» із домашнього завдання третього модуля. Додай управління станом за допомогою бібліотеки [Redux Toolkit](https://redux-toolkit.js.org/), замість локального React стану.
**Папки та файли**
Створи папку **src/redux** для зберігання файлів, пов'язаних із логікою Redux:
- **store.js** - файл створення стору
- **contactsSlice.js** - файл слайсу для контактів
- **filtersSlice.js** - файл слайсу для фільтрів
**Початковий стан**
Нехай початковий стан **Redux** виглядає наступним чином.
```js
{
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**
Зв'яжи React-компоненти з Redux-логікою за допомогою хуків **useSelector** та **useDispatch** бібліотеки [React Redux](https://react-redux.js.org/).
Усі компоненти, крім карточки контакту **Contact** у списку контактів **ContactList**, не повинні приймати жодних пропсів. Замість цього, компоненти мають використовувати хук **useSelector** та функції-селектори слайсів для отримання необхідних їм значень.
Для відправки екшенів компоненти використовують хук **useDispatch** та оголошені раніше екшени слайсів:
- Форма **ContactsForm** відправляє екшен додавання контакту при сабміті
- Карточка контакту **Contact** відправляє екшен видалення контакту при кліку по кнопці видалення
- Поле фільтра **SearchBox** відправляє екшен зміни фільтра при введенні в текстове поле відправляє екшен додавання контакту при сабміті
Карточка контакту Contact відправляє екшен видалення контакту при кліку по кнопці видалення
Поле фільтра SearchBox відправляє екшен зміни фільтра при введенні в текстове поле
**Бібліотека Redux Persist**
Використай бібліотеку [Redux Persist](https://www.npmjs.com/package/redux-persist) для збереження масиву контактів у локальному сховищі.
У файлі **store.js**:
Створи конфігурацію для збереження поля **items** зі слайса контактів.
Використовуй **persistReducer**, щоб застосувати конфігурацію до редюсера слайса контактів.
Використовуй **persistStore** для створення **persistor** для **PersistGate**.