In this technological era, since the requirements for web applications have become increasingly complicated, the state management of an application has a lot of challenges at the code level. For example, in Realtime applications, a lot of data is stored in the cache for faster retrieval apart from the data that is persisted in the database. Similarly, on the UI side, due to complex User Interfaces such as multiple tabs, multiple routes, pagination, filters, and breadcrumbs and more, application state management becomes a very difficult task.

In any application, different components exist, which interact with each other to produce a particular output or a state. There will also be chances that this interaction is so complex that you lost control over the application state. For example, a component or a model updating another component or a model that in turn causes an update of another view. This type of code is difficult to manage. It becomes challenging to add a new feature or fix any bugs because you don't know when a small change will affect another working functionality.

To reduce such issues, libraries like React removed the direct DOM manipulation and also asynchrony. However, it is only applied to view or presentation layer. The state management of your data is up to the application developers. This is where Redux comes into the picture.

Redux is a framework that manages states in a JavaScript app. This is what the official site says:

Redux attempts to make state mutations predictable by imposing certain restrictions on how and when updates can happen. We will see what these restrictions are and how they work shortly, but before that, let's understand the core concept of Redux.

Redux is very simple. When we talk about Redux, we need to remember three core terms: Store, Action, and Reducer. Here's what they are:

1. Store: The state of your application will be managed by Store, which is an object that maintains the application's state tree. Remember that there should be a single Store in your Redux app. Also, due to imposed restrictions, you can't directly manipulate or mutate the application store.
2. Action: To change something in your store, you need to dispatch an Action. An action is nothing but a plain JavaScript object that describes what has happened. Actions allow us to understand what is happening in the app and why and hence makes the state predictable.
3. Reducer: Finally, to glue actions and state together, we write a Reducer, which is a simple JavaScript function that takes state and action as arguments and returns the new state of the app.

Since we now have a basic understanding of Redux, let’s check the three fundamental principles of Redux, which are as listed:

1. Single source of truth: A store is simply a state container. As mentioned, in your React App, there should be only a single store and hence it is considered as source of Truth. A single object tree also makes it easy to debug the app.
2. State is Read Only: To change the state, application has to emit an Action that describes what has happened. No views or other functions can directly write to the state. This restriction prevents any unwanted state changes. Each action will be performed on a centralized object and in order so that we can get an up-to-date state at any point of time. As actions are just plain objects, we can debug and serialize them for testing purposes.
3. Changes are made with Pure Functions: To describe transformation of the state tree by dispatched actions, write Pure Functions/Reducers. What does the term Pure Function mean? A function is pure if it returns the same value every time a given set of arguments is passed to it. Pure functions do not modify their input arguments. Instead, they use the input to calculate a value and then return that calculated value. Our reducers are pure functions that take state and action as inputs and return new state and not the mutated state. You can have as many reducers as you want, and it is also recommended that you split big reducers to smaller reducers that can manage a specific part of your application tree. Reducers are JavaScript functions, so you can pass additional data to them. They can be built like common functions, which can be used across the application of Presentational and Container components.