Что такое коннекторы в React-Redux и как они работают?

Коннектор connect — это функция высшего порядка (HOC) из библиотеки React-Redux, которая связывает обычный React-компонент с глобальным Redux-хранилищем. Она берёт на себя подписку на store, извлечение нужных данных и передачу их в компонент через props, избавляя разработчика от ручного управления подписками и сравнения состояния.

Как это работает

При вызове connect(mapStateToProps, mapDispatchToProps)(Component) создаётся новый компонент-обёртка. Он подписывается на store через store.subscribe и при каждом обновлении состояния вызывает mapStateToProps, чтобы получить срез данных для обёрнутого компонента. Если результат изменился (по умолчанию используется поверхностное сравнение), компонент перерисовывается.

• mapStateToProps — функция, получающая state и возвращающая объект с данными для props.
• mapDispatchToProps — функция или объект, привязывающий action creators к dispatch.
• mergeProps — необязательная функция для объединения stateProps, dispatchProps и ownProps.

Пример использования

import { connect } from 'react-redux';
import { increment } from './actions';

function Counter({ count, increment }) {
  return <button onClick={increment}>{count}</button>;
}

const mapState = (state) => ({ count: state.counter.value });
const mapDispatch = { increment };

export default connect(mapState, mapDispatch)(Counter);

В современном коде чаще используют хуки useSelector и useDispatch, которые решают ту же задачу без HOC и лишней вложенности компонентов. Однако connect остаётся актуальным в legacy-проектах и при работе с классовыми компонентами.

Итог: коннектор стоит применять, когда нужно связать классовый компонент с Redux или поддержать существующую кодовую базу; в новых функциональных компонентах предпочтительнее хуки.