Объясните концепцию «компонентов-контейнеров» в React Redux

Концепция компонентов-контейнеров в React Redux основывается на разделении ответственности:

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

• Презентационные компоненты (presentational components) отвечают за отображение данных и не взаимодействуют напрямую с Redux. Они получают данные через пропсы и вызывают функции для отправки действий.

Контейнеры часто создаются с помощью функции connect, которая связывает компонент с состоянием и действиями. Пример:

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);

Контейнеры упрощают повторное использование логики, так как они изолируют работу с Redux. В современном React популярны хуки useSelector и useDispatch, которые выполняют ту же задачу, но избавляют от необходимости создавать отдельные контейнеры:

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

Таким образом, компоненты-контейнеры удобны для управления состоянием, но их концепция становится менее актуальной благодаря современным хукам.