contents: add solution for Flux pattern and its benefits (#2)

Added explanation for What is the Flux pattern and what are its
benefits?

Author: Prabhat-git-99

questions/what-is-the-flux-pattern-and-what-are-its-benefits/en-US.mdx

@@ -2,3 +2,65 @@
 title: What is the Flux pattern and what are its benefits?
 ---
 
+## TL;DR  
+Flux is a design pattern introduced by Facebook for managing unidirectional data flow in React applications. It centralizes state management through a dispatcher, stores, and actions. This ensures predictable state transitions, improves debugging, and simplifies reasoning about data flow, making applications easier to scale and maintain.
+
+---
+
+## What is the Flux Pattern?
+
+The **Flux pattern** is a state management architecture used with React to handle data flow in an application. It emphasizes **unidirectional data flow** and is composed of four key components:  
+1. **Actions**: Objects that contain a type and optional data. They represent events or changes triggered by user interactions or system updates.  
+2. **Dispatcher**: A central hub that manages and dispatches actions to stores.  
+3. **Stores**: Hold the application's state and business logic. They listen to actions and update their state accordingly.  
+4. **View (React Components)**: React components that render the UI based on the current state of the stores and can trigger new actions.
+
+---
+
+## Workflow in Flux
+1. **User Interaction**: A user interacts with the app (e.g., clicks a button).  
+2. **Action**: An action is created to describe what happened.  
+3. **Dispatcher**: The action is dispatched via the dispatcher to all stores.  
+4. **Store Update**: Relevant stores update their state based on the action.  
+5. **Re-render UI**: The React components re-render to reflect the updated state.
+
+---
+
+## Benefits of the Flux Pattern
+
+1. **Predictable State Management**  
+   - State updates are controlled and predictable since they flow in one direction.  
+   - Each change is tied to an action, making it easier to debug and understand.
+
+2. **Separation of Concerns**  
+   - Business logic resides in stores, separate from UI components.  
+   - Improves code maintainability and modularity.
+
+3. **Centralized Data Flow**  
+   - The dispatcher ensures a single source of truth for state updates.  
+   - Simplifies debugging and testing by consolidating state transitions.
+
+4. **Scalability**  
+   - Unidirectional flow makes it easier to manage larger and more complex applications.  
+   - Clear structure for managing dependencies between components and state.
+
+5. **Easy Debugging**  
+   - Logs of dispatched actions and state changes make debugging straightforward.  
+   - Tools like Redux DevTools enhance the debugging process.
+
+---
+
+## Example Workflow
+Imagine a shopping cart application:  
+1. **User Action**: A user clicks "Add to Cart."  
+2. **Action**: `{ type: 'ADD_TO_CART', productId: 123 }`  
+3. **Dispatcher**: Passes the action to the cart store.  
+4. **Store Update**: The cart store updates its state by adding the product.  
+5. **View Update**: The React component re-renders to display the updated cart.
+
+---
+
+## Relation to Redux
+Redux is an evolution of the Flux pattern, simplifying it by:  
+1. Removing the need for a dispatcher (a single reducer manages state updates).  
+2. Combining all stores into a single state object.