Как работает хранилище (store) в Redux?

Хранилище (store) — это объект, который содержит состояние всего приложения и предоставляет API для работы с этим состоянием. Оно создается с помощью функции createStore и принимает редьюсер как аргумент.

Основные методы хранилища:

getState:
Возвращает текущее состояние приложения.

const state = store.getState();
console.log(state);

dispatch:
Используется для отправки действий. После вызова dispatch, редьюсеры обрабатывают действие и возвращают обновленное состояние.

store.dispatch({ type: 'INCREMENT' });

subscribe:
Позволяет подписаться на изменения состояния. Каждый раз, когда состояние обновляется, вызывается переданная функция.

const unsubscribe = store.subscribe(() => {
  console.log('State updated:', store.getState());
});
// Чтобы отменить подписку:
unsubscribe();

Пример полного использования хранилища:

import { createStore } from 'redux';

// Редьюсер
function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

// Создание хранилища
const store = createStore(counterReducer);

// Подписка на изменения
store.subscribe(() => {
  console.log('Текущее состояние:', store.getState());
});

// Отправка действий
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });

Хранилище обеспечивает:

- Централизованное состояние: Все данные хранятся в одном месте.

- Предсказуемость: Изменения состояния происходят только через действия и редьюсеры.

- Возможность отслеживания: Благодаря методам subscribe и инструментам, таким как Redux DevTools.

Работа хранилища позволяет эффективно управлять состоянием, даже в больших приложениях с многочисленными компонентами.