The primary purpose of Redux is to offer a predictable and centralized approach to state management within an application. It adheres to the principles of the Flux architecture design pattern, which emphasizes unidirectional data flow. In essence, this means that within a Redux-based application, data flows in a single direction, simplifying the understanding and debugging of state changes over time.

Before delving into Redux Store, let's understand state management by a very basic example. 

In the below code we have four functions: F1, F2 , F3, and F4. Validation is F4 can access F3, F3 can access F2, and F2 can access F1. I have declared "a" variable in function F1, which is local scope (function scope ). What if the F4 function needs this variable to access it. There may be lot of solutions for that but one of them is to pass a local variable as a parameter to function F2, then from F2 to F3, and then from F3 to F4.

But do you really like the way we are passing variables from one function to another? Imagine when your app functions hierarchy grows; then passing and exchanging data between functions will be cumbersome and boring. 

Note: This logic of passing data between functions can be considered prop drilling in React JS. You can take an idea to understand What is Prop Drilling

 

The picture below will fully make you understand what happens when you deal with PROP drilling. Actually, it is a one-way direction logic to share variable state between components. It could be good when you have a small application and have minimum components to pass data, but what about when you deal with a very large application having lots of nested components? I guess you will be in a world where you will hate this concept.

So if you really understood the problem the you can think about the solution. Ok, so what is the solution. 

 

Solution: You need global state/variables.

Let's take a very basic idea to understand the logic. When you check the below code, you can imagine that I have declared a global variable (global scope). Now other functions easily get the variable state/value. Thus, you need Global state in your App/Program so that others can access state independently. 

 

How can we achieve global state when we talk about applications like React/Next.js? There are two popular ways to achieve the same.

• Context Api
• Redux Store

In this article I am not going to explain the Context API, but we will have a Redux Store. Basically, Redux is a store or provider that can manage global state for all components for the particular app. As you can see in below code

Redux Store acts as a state management provider for React App. It stores variables as global scope so that all components can access them. As above, you can see that the "x" variable can be accessed by components C4 without props drilling.

Three main pillars of Redux Store

• Reducers
• Actions
• UseSelector

 

Key terminologies within Redux include:

1. Store: This serves as the central repository for an application's state. It contains the complete state tree of the application and can be visualized as a JavaScript object representing the current state of the app.

2. Actions: Actions are plain JavaScript objects that describe changes in the application's state. These actions are dispatched to the Redux store and contain a type property specifying the type of action and any additional data necessary for state updates.

3. Reducers: Reducers are pure functions responsible for handling actions and defining how the application's state should change in response to those actions. They accept the current state and an action as inputs and return a new state.

4. Dispatch: Dispatching an action entails sending it to the Redux store, which subsequently triggers the execution of reducers to update the state as required.

5. Selectors: Selectors are functions that enable the extraction of specific data segments from the Redux store. They offer an efficient means of accessing and retrieving data from the store.

Redux promotes a strict separation of concerns, making it more straightforward to test, maintain, and scale applications. It proves particularly valuable in larger and more intricate applications where managing state can become challenging.

Why should you use React Redux?

1. Centralized State Management: React-Redux provides a centralized way to manage the state of your React application. All application data is stored in a single location called the Redux store. This centralization simplifies state management and offers better control over data flow.

2. Predictable Data Flow: Following the principles of the Flux architecture, React-Redux enforces a unidirectional data flow. This approach ensures that data changes in your application follow a clear and predictable path, making it easier to understand and debug state changes.

3. Improved Component Communication: React-Redux facilitates efficient sharing of state and actions among different components. Components can access the Redux store's state and dispatch actions to modify it. This eliminates the need to pass props through multiple component layers, resulting in cleaner code.

4. Enhanced Scalability: React-Redux becomes increasingly valuable as your application grows in complexity. It helps maintain a structured and organized codebase, making it easier to scale and add new features without introducing bugs or complexity.

5. Developer Tools: Integration with Redux DevTools allows for powerful debugging. You can inspect state changes, action history, and even time-travel through your application's state changes, making development and debugging more efficient.

7. Community and Resources: React-Redux benefits from a large and active community of developers. You can find extensive documentation, tutorials, and abundant online resources to help you learn and address common challenges when using Redux with React.

8. Testing: React-Redux simplifies the testing of your application. By encouraging separation of business logic from components, it becomes easier to write unit tests for reducers and actions without the need to render entire components.

9. State Persistence: Redux allows you to persist application state, making it useful for features like saving user preferences, caching data, or maintaining a consistent user experience across sessions.

In summary, React-Redux offers an organized and robust approach to state management in React applications. It brings advantages such as centralized state control, predictable data flow, and improved scalability. If you are working on medium to large-scale React projects or applications with complex data management requirements, React-Redux can significantly simplify your development process and enable you to build more maintainable and efficient code.