Розуміння Ролі Редʼюсерів

Теорія

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

Практика

У папці reducers нашого проєкту знаходиться файл counterReducer.js, у якому визначено редʼюсер для функціоналу лічильника:

import { createReducer } from "@reduxjs/toolkit";
import { increment, decrement } from "../actions/counterAction.js";

const initialState = 0;

const counterReducer = createReducer(initialState,
  (builder) => {
    builder
      .addCase(increment, (state) => state + 1)
      .addCase(decrement, (state) => state - 1);
});

export default counterReducer;

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

• Рядок 1: Імпорт функції createReducer з пакета @reduxjs/toolkit. Ця функція використовується для створення редʼюсерів у Redux;
• Рядок 2: Імпорт креаторів дій increment та decrement з файлу ../actions/counterAction.js. Ці креатори дій використовуються для визначення дій, які буде обробляти редʼюсер;
• Рядок 4: Встановлення константи initialState у значення 0. Це початкове значення лічильника у Redux store;
• Рядок 6: Використання функції createReducer для визначення counterReducer;
• Рядки 6-11: Функція createReducer приймає два аргументи: initialState і callback-функцію, яка визначає, як має оновлюватися стан залежно від відправлених дій;
• Рядок 7: Використання обʼєкта builder для визначення обробки різних дій усередині callback-функції;
• Рядки 9, 10: Використання методу addCase обʼєкта builder для визначення, як має оновлюватися стан при відправленні конкретних дій, таких як increment і decrement;
• Рядки 9, 10: Callback-функція всередині addCase приймає поточний стан (state) як аргумент і повертає новий стан після застосування відповідної дії;
• У цьому випадку, коли відправляється дія increment, стан збільшується на 1; коли відправляється дія decrement, стан зменшується на 1;
• Рядок 13: Нарешті, експортується counterReducer як експорт за замовчуванням модуля.

Примітка

Підсумовуючи, counterReducer буде обробляти відправлені дії та відповідно оновлювати стан лічильника у Redux store.