Что такое store в Redux?

Что такое Store в Redux?

В Redux store (хранилище) — это центральный, единый и неизменяемый (immutable) объект, который содержит всё состояние (state) приложения. Это не просто переменная или локальное хранилище, а предсказуемый контейнер состояния, управляемый строгими правилами. Store является единственным источником истины (single source of truth) для данных в приложении, что фундаментально отличает архитектуру Redux от других подходов к управлению состоянием.

Ключевые характеристики и назначение Store:

1. Хранит глобальное состояние: Весь state вашего приложения живёт внутри одного JavaScript-объекта в store. Это может быть что угодно: данные пользователя, настройки UI, результаты API. Например:

   // Состояние, хранящееся в store, может выглядеть так:
   {
     user: {
       name: 'Иван',
       isAuth: true
     },
     todos: [
       { id: 1, text: 'Изучить Redux', completed: true },
       { id: 2, text: 'Написать приложение', completed: false }
     ],
     ui: {
       theme: 'dark',
       isLoading: false
     }
   }
   

2. Предоставляет методы для взаимодействия:

    *   **`getState()`** — возвращает текущее состояние хранилища.
    *   **`dispatch(action)`** — единственный способ изменить состояние. Вы "отправляете" **action** (действие) — простой объект, описывающий, *что произошло*.
    *   **`subscribe(listener)`** — регистрирует функцию-слушатель, которая будет вызываться при каждом изменении состояния. Именно это позволяет React–компонентам "узнавать" об обновлениях и перерисовываться (хотя на практике используется связка с `react-redux` и хуками).

Принципы работы Store в парадигме Redux:

Store — это реализация паттерна "публикатор-nодписчик (pub-sub)", построенная вокруг трёх ключевых принципов:

• Единственный источник истины: Один store на всё приложение. Это упрощает отладку, сериализацию состояния (например, для сохранения в localStorage) и реализацию таких функций, как "отмена/повтор" (undo/redo).
• Состояние только для чтения: Вы не можете напрямую изменить состояние. Вместо этого вы создаёте action — чистый объект с обязательным полем type.

  // Пример action
  const addTodoAction = {
    type: 'todos/addTodo',
    payload: 'Купить молоко'
  };
  

• Изменения через чистые функции-редьюсеры: Для описания как action трансформирует состояние, вы пишете pure function — редьюсер (reducer). Редьюсер принимает предыдущее состояние и action, и возвращает НОВОЕ состояние, а не мутирует старое.

  // Пример редьюсера для списка задач
  const todosReducer = (state = [], action) => {
    switch (action.type) {
      case 'todos/addTodo':
        // ВАЖНО: Возвращаем новый массив, а не пушим в старый!
        return [...state, { id: Date.now(), text: action.payload, completed: false }];
      case 'todos/toggleTodo':
        return state.map(todo =>
          todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
        );
      default:
        return state;
    }
  };
  

Как создаётся Store?

Store создаётся с помощью функции createStore(), которой передаётся корневой редьюсер (root reducer). Часто при сложной структуре состояния используют combineReducers() для композиции нескольких редьюсеров.

import { createStore, combineReducers } from 'redux';

// Импорт отдельных редьюсеров
import todosReducer from './todosReducer';
import userReducer from './userReducer';
import uiReducer from './uiReducer';

// Комбинация в корневой редьюсер
const rootReducer = combineReducers({
  todos: todosReducer,
  user: userReducer,
  ui: uiReducer
});

// Создание единого store
const store = createStore(rootReducer);

// Теперь store готов к использованию:
console.log(store.getState()); // { todos: [], user: null, ui: {...} }
store.dispatch({ type: 'todos/addTodo', payload: 'Первая задача' });

Роль Store в экосистеме Redux и связь с React

Store сам по себе — это независимая библиотека. Для интеграции с React используется пакет react-redux, который предоставляет два ключевых механизма:

1. <Provider store={store}> — компонент высшего порядка, который делает store доступным для всех вложенных компонентов через React Context.
2. Хуки useSelector и useDispatch — позволяют компонентам получать нужные части состояния и отправлять actions без прямого обращения к store.subscribe или store.dispatch.

   import { useSelector, useDispatch } from 'react-redux';
   
   function TodoList() {
     // Извлекаем часть состояния из store
     const todos = useSelector(state => state.todos);
     // Получаем функцию dispatch для отправки actions
     const dispatch = useDispatch();
   
     const handleAdd = () => {
       dispatch({ type: 'todos/addTodo', payload: 'Новая задача' });
     };
   
     return (
       <div>
         {/* Рендерим список задач из store */}
         <ul>{todos.map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>
         <button onClick={handleAdd}>Добавить</button>
       </div>
     );
   }
   

Итог

Store в Redux — это больше чем хранилище данных. Это управляемый контейнер, который обеспечивает предсказуемость изменений состояния через строгий однонаправленный поток данных: View -> Action -> Reducer -> Store -> View. Его создание и использование — основа архитектуры Redux, которая делает состояние приложения явным, отлаживаемым и тестируемым, особенно в крупных и сложных проектах, где важна согласованность данных.