Как работает под капотом Redux?

Как работает Redux под капотом: архитектура и механизмы

Redux — это библиотека для управления состоянием (state) в JavaScript-приложениях, основанная на принципах функционального программирования и архитектуре Flux. Под её "капотом" находятся несколько ключевых механизмов, которые обеспечивают централизованное, предсказуемое и отслеживаемое управление данными.

Три фундаментальные концепции Redux

1. Единое дерево состояния (Single State Tree)
   Все состояние приложения хранится в одном объекте — store. Это обеспечивает централизацию данных и упрощает отслеживание изменений.

2. Действия (Actions)
   Это простые объекты, описывающие что произошло. Они являются единственным источником изменений в состоянии. Действие обязательно имеет поле type (обычно строку) и может содержать дополнительные данные (payload).

   // Пример действия
   const addTodoAction = {
     type: 'ADD_TODO',
     payload: { text: 'Learn Redux' }
   };
   

3. Редюсеры (Reducers)
   Это чистые функции (не имеют побочных эффектов), которые принимают текущее состояние и действие, и возвращают новое состояние. Они определяют как состояние изменяется в ответ на действия.

   // Пример редюсера
   const todosReducer = (state = [], action) => {
     switch (action.type) {
       case 'ADD_TODO':
         return [...state, action.payload];
       default:
         return state;
     }
   };
   

Внутренняя работа Store

Store — это объект, который создается функцией createStore(reducer, preloadedState, enhancer). Он объединяет несколько критических компонентов:

• Хранит текущее состояние (через внутреннюю переменную currentState).

• Реализует метод dispatch(action) — это "движок" Redux. Когда вызывается dispatch, store:

  • Передает текущее состояние и действие в редюсер.
  • Заменяет текущее состояние на новый результат редюсера.
  • Оповещает всех подписчиков (listeners) об изменении состояния.

  // Упрощенная логика dispatch внутри store
  function dispatch(action) {
    currentState = reducer(currentState, action);
    listeners.forEach(listener => listener());
    return action;
  }
  

• Предоставляет метод getState() — возвращает текущее состояние.

• Реализует метод subscribe(listener) — позволяет компонентам подписываться на изменения состояния. Возвращает функцию для отмены подписки.

• Может применять промежуточные слои (middleware) через механизм enhancer.

Механизм Middleware и усилители (Enhancers)

Middleware — это ключевая возможность Redux для расширения функциональности dispatch. Они реализуются через концепцию усилителей (enhancers), которые переписывают createStore. Самый известный middleware — redux-thunk для обработки асинхронных действий.

// Пример структуры middleware (функция высшего порядка)
const loggerMiddleware = store => next => action => {
  console.log('Dispatching:', action);
  const result = next(action); // Передаем действие следующему middleware или редюсеру
  console.log('New state:', store.getState());
  return result;
};

Применение middleware происходит через функцию applyMiddleware, которая:

• Создает цепочку middleware, где каждый имеет доступ к dispatch и getState.
• Заменяет оригинальный dispatch на версию, проходящую через эту цепочку.

Связь с React через React-Redux

Для интеграции с React используется библиотека react-redux, которая предоставляет:

• <Provider> — компонент, который передает store в контекст React, делая его доступным для всех компонентов.
• connect(mapStateToProps, mapDispatchToProps) или хуки (useSelector, useDispatch) — механизмы для подключения компонентов к store.

Под капотом connect использует подписку на store (store.subscribe) и перерисовывает компонент только когда соответствующие части состояния изменяются, оптимизируя производительность.

Оптимизации и внутренние гарантии

Redux обеспечивает несколько важных гарантий:

• Состояние изменяется только через dispatch — нет прямого изменения.
• Редюсеры всегда чисты — нет сторонних эффектов, что упрощает тестирование и предсказуемость.
• Строгое сравнение по ссылкам — редюсеры возвращают новые объекты состояния, что позволяет легко определять изменения.

Эволюция: Redux Toolkit (RTK)

Современный Redux часто используется через Redux Toolkit, который абстрагирует многие сложности:

• createSlice() — автоматически генерирует действия и редюсеры.
• configureStore() — автоматически включает middleware (например, redux-thunk) и настройки для разработки.
• Использует Immer под капотом — позволяет писать "мутирующий" код в редюсерах, который преобразуется в иммутабельные изменения.

// Пример с Redux Toolkit
const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload); // Immer позволяет мутацию!
    }
  }
});

Заключение

Под капотом Redux — это элегантная, но строгая система: единое хранилище, управляемое чистыми функциями (редюсерами), изменения которого инициируются только через действия (dispatch), с возможностью расширения через middleware. Эта архитектура, хотя иногда воспринимается как "излишняя", обеспечивает несравненную предсказуемость, тестируемость и отслеживаемость состояния в сложных приложениях, особенно когда сочетается с современными инструментами типа Redux Toolkit.