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

Question

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

YeaHub · Accepted Answer

Функция 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 (

Count: {count}

); } const mapStateToProps = (state) => ({ count: state.counter, }); const mapDispatchToProps = (dispatch) => ({ increment: () => dispatch({ type: 'INCREMENT' }), }); export default connect(mapStateToProps, mapDispatchToProps)(Counter);В современном React чаще используются хуки useSelector и useDispatch, которые выполняют те же функции, что и connect, но через функциональные компоненты. Однако connect остается полезным, особенно в классических компонентах.