The amalgamation of React and Redux is trending over the internet, but this popularity should not be a reason for using Redux in your application. Instead, you should be asking why you need Redux. What problems does it solve? A lot of technical books and blogs claim that Redux facilitates state management. That statement, in itself, is very vague. This is even vaguer a claim given that React also has state management. So, why should we use Redux in our applications?
React has a unidirectional data flow. The data is passed to a lower component by using props. For example, consider a simple state machine, as shown in the following screenshot:
The main component, App, holds the state of the machine and the props. The state status is passed down as the props, as follows:
In order to change the data up to the tree, a callback function must be passed as the props to any component that changes the state:
This is a normal scenario in any React application. When you keep building the application, more and more components are aggregated. Your application will react to the state; you will have layers of components, and the top layer will pass props to the child components. To understand this scenario, let's look at the example of Pinterest:
To achieve the layout shown in the preceding screenshot, we will require several components, and each component will need to pass props and states to its child components. A mocked-up version for different components would look something like the following snippet:
<App state={user: {}}>
<Navbar user = {user}>
<Logo />
<SearchBar />
<Menu> ... </Menu>
</Navbar>
<Content user={user}>
<TitleBar user={user} />
<Avatar user={user} />
<Board data={data} />
....
</Content>
<Footer />
</App>
In the preceding snippet, it is obvious that some props and states are used multiple times. For example, the Avatar component, the TitleBar component, and the Navbar component require user information. In order to deliver user information, each of the parent components must pass the props to their child components. It is possible to achieve this by passing the props; however, it will be cumbersome and painful if we have a bunch of components working together. By now it must be obvious that, when we work with React, we are dealing with a lot of components interacting with each other.
Instead of an intermediate component accepting and passing along the props, it would be nice if the component did not need to know about the data. This is the problem that is solved by Redux. It provides direct access to the required dataset.
It is very intimidating to start coding your application. However, you can avoid a lot of hassle and debugging time if you can model your application. There are several tools that are available to model your application. If your model looks like the one in the preceding example, you can consider using Redux. If you feel the need to cache data between views and remember the data for the next layer, Redux is the best option. Finally, if you know that your application is large and your web application will deal with a large set of data that will fluctuate over time, Redux is a good option; it will help you to build an abstraction between the physical layer and the data layer.
Frequently asked questions
The following is a list of frequently asked questions about Redux:
- Can I use Redux without React?
Yes; Redux is an elegant library for state management. It can be used with any other library, including Vanilla JS, Angular, Vue JS, JQuery, Ember, Aurelia, and others. - Do I need Redux to build React applications?
No; Redux facilitates managing the data layer in React applications. It really depends on the type of application that you are building. The amalgamation of React with Redux is very popular on the web, but you should really think about whether you need Redux. React already does state management, so using Redux for smaller applications will be overkill. - What do I need to use Redux?
You will need ES6, ES5, or later versions.
