Как работает хранилище (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.

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