Теорія

У Redux сховище (store) виступає єдиним джерелом істини для стану застосунку. Воно містить повне дерево стану та є незмінним. Для зміни стану необхідно надсилати дії (actions). Використовуючи функції та хуки Redux Toolkit, можна легко отримувати доступ до сховища та змінювати його.

Практика

Створено файл store.js у папці redux. Можна налаштовувати все сховище. Ось приклад, як це можна зробити:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./reducers/counterReducer";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Пояснення коду: Цей код налаштовує сховище Redux за допомогою функції configureStore з пакету @reduxjs/toolkit. Розглянемо його поетапно.

• Рядок 1: Імпортується функція configureStore з пакету @reduxjs/toolkit. Ця функція спрощує створення сховища Redux, надаючи розумні налаштування за замовчуванням і вбудовані middleware;
• Рядок 2: Імпортується counterReducer з файлу ./reducers/counterReducer. Ця функція-редуктор відповідає за зміни стану для зрізу (slice) "counter" у сховищі Redux. Логіка цього файлу буде створена далі;
• Рядки 4-8: Викликається функція configureStore з об'єктом у якості аргументу. Цей об'єкт визначає параметри конфігурації сховища. У цьому випадку використовується лише опція reducer (рядок 5);
  • Опція reducer — це об'єкт, який зіставляє зрізи стану з відповідними функціями-редукторами. У цьому випадку зріз стану counter зіставляється з функцією counterReducer;
  • Функція configureStore повертає об'єкт сховища Redux, який містить стан застосунку та надає методи для взаємодії з ним.
• Рядок 10: Об'єкт store експортується як експорт за замовчуванням цього модуля, щоб його можна було використовувати в інших частинах застосунку.

Примітка

Підсумовуючи, цей код створює Redux store з єдиним зрізом стану "counter", використовуючи counterReducer для обробки змін стану. Отриманий store експортується для використання в інших частинах застосунку.