Как принцип HOC применяется внутри стейт-менеджеров?

Что такое HOC и как он работает в стейт-менеджерах?

Higher-Order Component (HOC) — это паттерн в React, который представляет собой функцию, принимающую компонент и возвращающую новый компонент с расширенной функциональностью. В контексте стейт-менеджеров, таких как Redux, HOC используется для связывания компонента с глобальным состоянием приложения.

Пример с Redux connect

Наиболее известный пример — функция connect из библиотеки react-redux. Она принимает две функции: mapStateToProps и mapDispatchToProps, и возвращает HOC, который оборачивает ваш компонент. Внутри HOC подписывается на store Redux и передаёт нужные данные и действия через props.

import { connect } from 'react-redux';

const mapStateToProps = (state) => ({
  count: state.counter.value
});

const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch({ type: 'INCREMENT' })
});

const Counter = ({ count, increment }) => (
  <div>
    <p>{count}</p>
    <button onClick={increment}>+</button>
  </div>
);

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Как это работает внутри?

HOC, созданный connect, внутри себя использует React.Context или прямой доступ к store (через useStore в современных версиях). Он отслеживает изменения в store и при обновлении состояния перерисовывает обёрнутый компонент, передавая ему новые props. Это позволяет компоненту оставаться "глупым" (чисто презентационным), не зная о существовании Redux.

Применение в других стейт-менеджерах

Аналогичный подход используется в MobX (через observer HOC) или в библиотеках для работы с Context (например, withTheme). HOC позволяет инкапсулировать логику подписки на состояние и делает компоненты более переиспользуемыми.

Вывод: HOC в стейт-менеджерах — это мощный инструмент для разделения ответственности между управлением состоянием и отображением UI. Он особенно полезен в больших приложениях, где требуется централизованное состояние и чистая архитектура компонентов.