Крок 3

Зосередьтеся на створенні редюсера для обробки відправлених дій та оновлення стану цілей у Redux store. Редюсери — це чисті функції, які визначають, як має змінюватися стан у відповідь на дії.

Приклад

Завдання

1. Відкрийте файл goalReducer.js.
2. Створіть редюсер за допомогою функції createReducer з пакету @reduxjs/toolkit. Ця функція спрощує процес створення редюсерів.
3. Встановіть початковий стан цілей як порожній масив ([]).
4. Усередині функції createReducer вкажіть обробку різних дій, використовуючи дії, створені у файлі goalAction.js.
5. Для додавання цілі використовуйте метод .addCase і передайте дію addGoal як перший аргумент. У відповідній callback-функції оновіть стан, додавши action.payload (ціль) у масив стану.
6. Для видалення цілі використовуйте метод .addCase і передайте дію removeGoal як перший аргумент. У відповідній callback-функції оновіть стан, повернувши новий масив, у якому відфільтровано ціль із відповідним goal.id із масиву стану.

1. Функція createReducer спрощує процес створення редюсерів, надаючи зручний синтаксис.
2. Використовуйте метод .addCase об'єкта builder для визначення обробки різних дій.
3. Доступ до payload дії здійснюється через action.payload.