ReactRedux

ReactRedux, commonly known as the React-Redux bindings, is the official library that connects React components to a Redux store. It provides the mechanisms for components to read data from the store and to dispatch actions to update the store in a predictable way. The library assumes a Redux pattern with a single immutable store, a set of actions, and reducers that produce new state.

The main exports are Provider and connect. Provider uses React’s context to pass the store through the component tree. The connect higher-order component wraps a component and injects props based on mapStateToProps and mapDispatchToProps, allowing components to access selected state and dispatch actions without directly interacting with the store.

In addition to connect, modern React-Redux offers hooks for function components, such as useSelector and useDispatch. useSelector subscribes to the store and re-renders the component when the selected state changes; useDispatch returns the store’s dispatch function. There is also useStore and support for custom equality checks to optimize rendering.

Typical usage involves creating a Redux store and wrapping the app with a Provider, then connecting components via connect or using the hooks. mapStateToProps selects slices of state to pass as props, while mapDispatchToProps binds action creators to dispatch. For derived data, selectors (often using libraries like reselect) help memoize computations and reduce unnecessary renders.

ReactRedux emphasizes predictable data flow and performance, avoiding unnecessary re-renders while keeping component logic declarative. It is widely adopted in the React ecosystem as the standard binding between React and Redux.