Are you a front-end developer working with React.js and struggling whether to use Redux? Don’t worry you’re not alone.

Redux is a state management tool for JavaScript applications. While it is frequently used with React, it is compatible with many other React-like frameworks such as Angular and even plain JavaScript. The main concept behind Redux is that the entire state of an application is stored in one central location. Each component of an application can have direct access to the state of the application without having to send props down to child components or having to use callback functions to send data back to a parent.

Redux solves the problem of dataflow and that’s why it is very useful. React does state management on its own, but Redux does it in a much simpler and cleaner way which is very useful with complex applications. It is entirely possible to write a complete application using nothing but React. However, as the application gets more complex, you will realize that it is not that straightforward and that it can be a bit more difficult if you’re using only React.

Code displayed on a laptop.

One-way dataflow

With Redux, all of our data lives in a single store, and components can subscribe only to the data they need, regardless of where they are being mounted. 

When a component mounts, it simply subscribes to the data that it needs from the Store - the developer doesn’t have to type out props being passed in from its parent. And if that component needs to change its shared application state, it can import actions or action creators directly and then dispatch them.

Redux, just like React, follows a strict, one-way data flow. All data in an application follows the same lifecycle pattern, making the logic of the application more predictable and easier to understand. It also encourages data normalization, so that you don't end up with multiple, independent copies of the same data that are unaware of one another.

Less hassle

When updates to the store are necessary, the path for updating the data in the store follows the same flow every time, no matter where the update is coming from. Whether it's from a user that inputs data into a form or data that's fetched from an API is all the same. The data in a Redux application flows in one direction leading to the store all the time.

Illustration of the redux data flow.

Redux helps us do less typing, write less complicated code, and develop components that are free of coupling and easy to reuse. So, if your application is going to be large, complex and maintaining big amounts of data, the best solution is combining React with Redux.