Для чего используется функция connect в React Redux? Какие параметры принимает?

Функция connect из библиотеки React Redux — это HOC (Higher-Order Component), которая связывает компонент с хранилищем Redux. Она позволяет передавать состояние и действия Redux в компонент через пропсы.

connect принимает два основных параметра:

• mapStateToProps:
  Это функция, которая определяет, какие данные из состояния Redux нужно передать в компонент. Она принимает текущее состояние хранилища как аргумент и возвращает объект, который будет добавлен в пропсы компонента.

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

• mapDispatchToProps:
  Это функция, которая передает методы для отправки действий (dispatch) в компонент. Она может быть функцией или объектом:

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

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

import React from 'react';
import { connect } from 'react-redux';
function Counter({ count, increment }) {
	return (
		<div>
			<p>Count: {count}</p>
			<button onClick={increment}>Increment</button>
		</div>
	);
}
const mapStateToProps = (state) => ({
	count: state.counter,
});
const mapDispatchToProps = (dispatch) => ({
	increment: () => dispatch({ type: 'INCREMENT' }),
});
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

В современном React чаще используются хуки useSelector и useDispatch, которые выполняют те же функции, что и connect, но через функциональные компоненты. Однако connect остается полезным, особенно в классических компонентах.