Теорія

Дії — це об'єкти з даними, які описують зміни, що мають бути внесені до стану. Генератори дій — це функції, які створюють дії. Вони інкапсулюють логіку створення дій і можуть повторно використовуватися у всьому застосунку.

Практика

Маємо файл з назвою counterAction.js у папці 'actions'. У цьому файлі визначаються дії та генератори дій для функціоналу лічильника.

import { createAction } from "@reduxjs/toolkit";

export const increment = createAction("counter/increment");
export const decrement = createAction("counter/decrement");

Пояснення коду:

• Рядок 1: Імпорт функції createAction з пакету @reduxjs/toolkit. Ця функція спрощує створення генераторів дій;
• Рядок 3: Створення функції-генератора дій increment за допомогою createAction. Ця функція генерує дії для збільшення лічильника;
  • Рядок "counter/increment", переданий як аргумент, є типом дії. Він допомагає ідентифікувати дію під час її відправлення.
• Рядок 4: Аналогічно створюється функція-генератор дій decrement за допомогою createAction. Ця функція генерує дії для зменшення лічильника.
  • Рядок "counter/decrement" є типом дії для зменшення.

Використовуючи createAction, ці функції генерують об'єкти дій із властивістю type, встановленою у вказаний рядок типу. Ці дії можуть бути відправлені у редюсери Redux або компоненти React для оновлення сховища Redux.

Примітка

Рядки типів дій, такі як "counter/increment" та "counter/decrement", повинні бути описовими та відображати призначення дії. Зазвичай для кращої організації до типу дії додають префікс із назвою функціоналу або зрізу (slice). Для послідовності та спрощення рефакторингу рекомендується використовувати строкові константи або змінні.