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.

A lot of blogs, books, online tutorials, videos, and courses found on the World Wide Web start with a common statement, saying that Redux was built on the top of functional programming. The statement is valid, which means that developers like us need to understand the concept of functional programming.

Let's point out some of the important characteristics of functional programming, as follows:

1. Functions are first class objects
2. Functions can be chained together
3. Functions can be passed as arguments
4. Functions, recursions, and an array can be used to control the flow
5. We can use pure, higher-order, closure, and anonymous functions
6. We can utilize several helper functions, including map, filter, and reduce

In functional programming, functions are considered first class citizens. This means that the language does support passing functions to other functions as arguments, and returning them as the values for other functions. Moreover, they can also be assigned to other variables, or stored in some data structure.

An example of calculating body mass index (BMI), provided the height (in meters) and weight (in kilograms), can be created via the following method. The function is stored in a variable named bmi and can be called whenever it is required:

const bmi = (weight, height) => weight / (height * height);

A variable can be added to any object. Since a function is stored in a variable, it can also be added to objects, as follows:

const myCalculator = {
    bmi: (weight, height) => weight / (height * height)
};

Similarly, we can add it to an array, as follows:

const myCalculator = [
 Bmi => (weight, height) => weight / (height * height)
];

Functions can be used as arguments for other functions. Let's use the preceding bmi function to check whether a person has an obesity issue. According to the BMI scale, someone with a bmi between 30.0 and 54 is said to have obesity. We will pass a function as an argument, as follows:

const bmi = (weight, height) => weight / (height * height);
const hasObesity = (bmi) => bmi >= 30.0 && bmi <=54;
console.log(hasObesity(bmi(100, 2.2)));

Another common scenario is when a function returns another function, as follows:

const bmi = (weight, height) => weight / (height * height);
const calculator = () => {
 return bmi;
};

Higher-order functions (HOF)  is the fanciest term you will be hearing when getting started with functional programming. Higher-order functions are functions that take functions as arguments or return functions. By now, we have already been consuming such functions. Remember Array.reduce(), Array.filter(), and Array.map()? These are all higher-order functions. In the Redux library, we are consuming some of the HOF, too (such as connect()).

The most common definition of a pure function is a function that does not have side effects. This is to say that the returned value of a pure function is not affected, influenced, or changed by anything other than its input parameters. Provided the same input, the pure function always generates the same output. An example is as follows:

const sum = (a, b) => a + b;

This is an example of a pure function. Assuming that you call the function sum(6,9), the result is always 15, irrespective of the number of times that you run the function. You can be confident, if you are calling a pure function with the same input, that you are always going to get the same output, which means that the output is predictable. An example of an impure function is the following square function. In addition to returning the square of the number, the function might be updating the number in a database:

function square(number) {
 updateNumberInDB(number);
 return number * number;
}

A composition is a very important concept of functional programming; it is how we create a higher-order function by consuming and combining simpler functions.

Let's just use the sum function that we defined previously. We can split the sum function into the following composition:

const sum = a => b => a + b
sum(2)(5)

Any function can be transformed into a composable function via the concept of currying. Explaining these fundamental functional concepts is beyond the scope of this book, and we suggest that you get familiar with functional terms as much as possible, in order to get a full understanding of Redux and React. We will consume a composition function from Redux, called compose, in upcoming chapters.