Subscribe to selected state
A presentational component needs selected Redux values as props and should update when those values change.
Redux Toolkit · Function
connect
connect() wraps a React component with access to selected Redux state and dispatchable actions. It remains supported, but the documentation recommends the hooks API for new code.
How it works
connect() returns a new wrapper component around the supplied React component. The wrapper can subscribe to store updates through mapStateToProps, inject dispatchable actions through mapDispatchToProps, and combine those values with the wrapped component's props.
Syntax
connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)(Component)Parameters
| Name | Type | Description |
|---|---|---|
mapStateToProps | Function | null | undefined | Optional function selecting component data from the Redux state; its result must be a plain object. |
mapDispatchToProps | Function | Object | Optional function or object that supplies dispatchable actions or dispatch to the wrapped component. |
mergeProps | Function | Optional function that controls how state props, dispatch props, and own props are combined. |
options | Object | Optional connection configuration object. |
Returns
A function that accepts a React component and returns a new connected wrapper component.
Key points
- Use connect to expose selected store data and dispatch capabilities to a React component.
- The original component is preserved; connect creates a wrapper around it.
- The optional inputs are mapStateToProps, mapDispatchToProps, mergeProps, and options.
- Supplying state mapping makes the connected wrapper observe store updates.
- Dispatch mapping supports an object shorthand, a callback function, or omission.
- Mapping callbacks receive the relevant Redux state or dispatch value as their first argument.
Common mistakes
- The API remains supported, but new code should generally prefer the hooks API.
- Return a plain object from mapStateToProps; other return shapes are invalid.
- Use null or undefined as the first argument when the component should not subscribe to state changes.
Example: Connect a component to Redux
import { connect } from "react-redux";
import { increment } from "./counterSlice";
function Counter({ value, increment }) {
return <button onClick={increment}>{value}</button>;
}
const mapStateToProps = (state) => ({ value: state.counter.value });
export default connect(mapStateToProps, { increment })(Counter);The wrapper reads the selected state and injects the action creator as a prop; clicking the button dispatches the action.
When to use it
Inject bound actions
A component should invoke Redux action creators without manually calling dispatch.
Maintain legacy integrations
An existing class or function component already uses the classic React-Redux connection pattern.
Interview questions
QWhat does connect() return?
connect() is a higher-order component function: it accepts optional mapping functions or objects and returns a function that wraps a component. The result is a new connected component, while the original component is left unchanged.
Follow-up: What happens when mapStateToProps is provided? The wrapper subscribes to store updates and recalculates the mapped props whenever the store changes.
QHow does mapStateToProps work?
mapStateToProps receives the complete Redux state and should return a plain object containing the values needed by the wrapped component. The returned fields are merged into that component's props.
Follow-up: How can subscription be disabled? Pass null or undefined for mapStateToProps.
QWhat forms can mapDispatchToProps take?
mapDispatchToProps can be an object, a function, or omitted. With an object, action creators are bound so calls from the component dispatch their actions; when it is omitted, dispatch is supplied by default.
Follow-up: Which approach is preferred for new React code? The documentation recommends the hooks API, which is simpler and works better with TypeScript.
Related
mapStateToPropsmapDispatchToPropsmergePropsProvideruseSelectoruseDispatch