Redux is a common tool that’s used with React. It creates a central “store”. This store holds your data (the React state).
You can connect your React components to the store to read data or use dispatch actions to update the data in your store.
The official docs make it sound so complicated:
Why Use React Redux?
Redux itself is a standalone library that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. Although Redux and React are commonly used together, they are independent of each other.
If you are using Redux with any kind of UI framework, you will normally use a “UI binding” library to tie Redux together with your UI framework, rather than directly interacting with the store from your UI code.
React Redux is the official Redux UI binding library for React. If you are using Redux and React together, you should also use React Redux to bind these two libraries.
To understand why you should use React Redux, it may help to understand what a “UI binding library” does.
This doesn’t explain why I should use it…
Other explanations are more detailed but not easier to understand.
A high-level-overview:
- React: each component either holds its own state (= data) or receives it as props from a different component
- it’s hard to access data when the components don’t have a parent-child hierarchy (for example,“sibling components”)
- several “lower components” might modify the data of a “higher component” and you can’t be sure that you always get the current data back
- Redux: takes care of all that data passing by being your “single source of truth”: your central data store
- by hooking into the Redux store you can easily access and modify data and assure that your components are always up-to-date
There are other benefits like performance optimizations, immutability, etc., too.
Further Reading
- Redux Official Site
- React Redux Tutorial for Beginners: The Definitive Guide (2019) by Valentino Gagliardi