connect as Legacy

Before React 7,897 Redux 7.1 3,824 shipped Hooks in June 2019, the only way to read the store was connect(), a higher-order component that injected state and dispatch as props. It still works, but you learn it only to read the codebase you inherited.

A connected component: a wrapper computes props from stateJavaScript
const mapStateToProps = (state, ownProps) => ({ count: state.cart.count, id: ownProps.id });
const mapDispatchToProps = { added: () => ({ type: 'cart/added' }) };
export default connect(mapStateToProps, mapDispatchToProps)(CartBadge);

Reading such a component is mechanical translation: mapStateToProps becomes one useSelector call per value, and a mapDispatchToProps object becomes dispatch(actionCreator()). Converting one needs care in a single place — connect compared mapStateToProps output shallowly, so a component returning { a, b } needs shallowEqual once converted. connect earns its keep in one situation today: class components, which cannot call Hooks.