react-redux
Official React bindings for Redux
React Redux is the official bridge between React and Redux, letting any component subscribe to shared app data and automatically re-render only when that data changes, no manual wiring required.
React Redux is the official library that connects React and Redux together. To understand what this does, it helps to know what each piece is separately. React is a popular JavaScript library for building user interfaces — buttons, forms, lists, and so on. Redux is a separate library for managing the data your app depends on (called "state"), such as a logged-in user's information or the items in a shopping cart. The problem is that these two libraries don't automatically know how to talk to each other — React Redux is the bridge.
Without React Redux, you would have to write a lot of manual code to make your React components read from or update the Redux data store. React Redux provides built-in tools that let any component in your app subscribe to the data it needs and automatically re-render when that data changes, without re-rendering the parts that don't care about that change. This makes the app efficient and keeps the code clean.
You would use React Redux when your React application has complex data that many different parts of the interface need to share — for example, a large dashboard, an e-commerce site, or any app where multiple components need to read and update the same information. It is used with React version 18 or later and the library is written in TypeScript.
Where it fits
- Connect a React component to a Redux store so it reads shared state and re-renders automatically when that state changes.
- Build a large dashboard where many components need to share logged-in user info or a shopping cart without passing props through every layer.
- Replace manual prop-drilling between nested React components by reading shared state from a central Redux store.