Крок 4

Зосередження на інтеграції логіки Redux у React-додатку. Підключення компонентів React і сховища Redux для забезпечення керування станом і виконання дій.

Приклад

Додаток для відстеження кораблів

Завдання

Form.jsx:

1. Відкрити файл Form.jsx.
2. Імпортувати хук useDispatch з пакету react-redux. Цей хук використовується для відправлення дій у сховище Redux.
3. Імпортувати дію addGoal з файлу goalAction.js. Ця дія відповідає за додавання цілі до сховища Redux.
4. Ініціалізувати змінну dispatch всередині компонента, викликавши хук useDispatch.
5. Завершити функцію handleFormSubmit, відправивши дію addGoal. Використати функцію dispatch і передати об'єкт із деталями цілі: { id: Date.now(), text: goal }. Date.now() генерує унікальний ідентифікатор для кожної цілі.
6. Скинути форму після відправлення, викликавши функцію resetForm.

GoalList.jsx:

1. Відкрийте файл GoalList.jsx.
2. Імпортуйте хуки useDispatch та useSelector з пакету react-redux. Ці хуки використовуються для доступу до Redux store та відправлення дій.
3. Імпортуйте дію removeGoal з файлу goalAction.js. Ця дія відповідає за видалення цілі з Redux store.
4. Ініціалізуйте змінну goals за допомогою хука useSelector та отримайте стан goals з Redux store.
5. Ініціалізуйте змінну dispatch, викликавши хук useDispatch.
6. Завершіть функцію handleRemoveGoal, відправивши дію removeGoal. Передайте goal як параметр.
7. Завершіть логіку відображення масиву цілей, використовуючи метод map для масиву goals та рендерингу кожної цілі.
8. Відобразіть текст кожної цілі та додайте кнопку з подією onClick, яка викликає функцію handleRemoveGoal і передає відповідну goal.

1. Використовуйте хуки useDispatch та useSelector для доступу до Redux store та відправлення дій.
2. Працюйте з діями removeGoal та addGoal з goalAction.js для обробки дій, пов'язаних із цілями.
3. Переконайтеся, що payload для дії addGoal містить унікальний id, згенерований за допомогою Date.now(), та текстове значення з поля вводу.
4. Реалізуйте функцію handleRemoveGoal для відправлення дії removeGoal з відповідною ціллю.
5. Використовуйте функцію map для ітерації по масиву goals та рендерингу кожної цілі, відображаючи її текст.