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

Question

Компоненты-контейнеры — это React-компоненты, которые связываются с хранилищем Redux для управления состоянием. Они получают данные из состояния через mapStateToProps и передают действия через mapDispatchToProps. В результате они работают как посредники между Redux и презентационными компонентами.

YeaHub · Accepted Answer

Концепция компонентов-контейнеров в React Redux основывается на разделении ответственности:Контейнеры (containers) сосредоточены на подключении к хранилищу Redux. Они получают данные из глобального состояния и передают их своим дочерним компонентам.Презентационные компоненты (presentational components) отвечают за отображение данных и не взаимодействуют напрямую с Redux. Они получают данные через пропсы и вызывают функции для отправки действий.Контейнеры часто создаются с помощью функции connect, которая связывает компонент с состоянием и действиями. Пример:import React from 'react'; import { connect } from 'react-redux'; function Counter({ count, increment }) { return (

Count: {count}

); } // Связывание с состоянием и действиями 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 (

Count: {count}

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