What Is React Flux In React - ReactJS Tutorials

What Is React Flux?

Flux created by the Facebook. It controls how data moves inside the JavaScript app, React, frameworks and other libraries, It is not limited to react only. Flux as having four main parts to flow.

In simple term’s, whatever data movement inside the apps like User action → data changes → UI updates, You can all the movement control by the flux.

What does “data moves” mean In Flux?

Suppose you use To-Do app.

You click “Add Task” → (this is the one action)
Action goes to Dispatcher → (a messenger)
Dispatcher sends it to the Store → (your app’s memory)
Store updates the task list
Now you shows new task in your UI → (you see it on screen)

Why Flux Important?

Data can get confusing in Big Apps, because It is flow data in everywhere.

flux makes data organized and data will only go forward in his right and single path.

Flux is like a traffic rule for your app data. it make sure to every updates and data flow follow the same clear route. so nothing lost the data.

What Is Dispatcher?

Dispatcher is a traffic police in your app’s data.

When dispatcher receive actions like “Add List” and “Delete List”, So it tell the right path of the app to update data according to right actions. Dispatcher responsible for all the receiving actions like API calls and User Interactions. only one dispatcher used per application in flux.

You give one order
The dispatcher (👮 person at the counter) read your order
Then they tell the correct order (Sandwich or Tea) to prepare it store.
Then your food is ready and shown (UI Updates)

📊 Flux Data Flow Diagram

[1]  User Action (Click / Type / Event)
         ↓
[2]  Action (Object with 'type' and 'data')
         ↓
[3]  Dispatcher (Central hub that sends action)
         ↓
[4]  Store (Updates the data / state)
         ↓
[5]  View (UI updates based on new store data)
         ↑
         └───── listens for changes ─────

Pizza Ordering System Flux Application

This small app pizza ordering system using flux pattern, used to manage data flow in four step

Actions – What you want > (order or cancel pizza)
Dispatcher – Pass that action to the store > pass to the right way
Store – Manages and updates the data (orders)
View – Show current orders on the screen (console)

<h2>Pizza Ordering Example using Flux Architecture</h2>

<p>This is a simple real-life example of using Flux architecture to manage pizza orders in JavaScript:</p>

<pre><code>
// === Action ===
const PizzaActions = {
  orderPizza: (flavour) => ({
    type: 'ORDER_PIZZA',
    payload: flavour,
  }),
  cancelPizza: (flavour) => ({
    type: 'CANCEL_PIZZA',
    payload: flavour,
  }),
};

// === Dispatcher ===
const PizzaDispatcher = {
  dispatch(action) {
    PizzaStore.handleActions(action);
  },
};

// === Store ===
const PizzaStore = {
  orderedPizzas: [],
  listeners: [],
  handleActions(action) {
    switch (action.type) {
      case 'ORDER_PIZZA':
        this.orderedPizzas.push(action.payload);
        this.notify();
        break;
      case 'CANCEL_PIZZA':
        this.orderedPizzas = this.orderedPizzas.filter(
          (item) => item !== action.payload
        );
        this.notify();
        break;
    }
  },
  getOrders() {
    return this.orderedPizzas;
  },
  subscribe(callback) {
    this.listeners.push(callback);
  },
  notify() {
    this.listeners.forEach((cb) => cb());
  },
};

// === View ===
function displayOrders() {
  console.clear();
  console.log('Current Pizza Orders:');
  PizzaStore.getOrders().forEach((pizza, i) =>
    console.log(`${i + 1}. ${pizza}`)
  );
}

PizzaStore.subscribe(displayOrders);

// Simulate interaction
PizzaDispatcher.dispatch(PizzaActions.orderPizza('Cheese Burst'));
PizzaDispatcher.dispatch(PizzaActions.orderPizza('Farmhouse'));
PizzaDispatcher.dispatch(PizzaActions.cancelPizza('Cheese Burst'));
PizzaDispatcher.dispatch(PizzaActions.orderPizza('Mushroom Delight'));
</code></pre>

In this example:

PizzaActions is an object that contains functions to create actions.
These actions are plain JavaScript objects.
orderPizza(flavour) > Tells the system to “Add this pizza flavour to cart”.
cancelPizza(flavour) > Tells the system to “Remove this flavour from cart”.
It take the action (from above code) and send it to the Store.
Think its like a middleman to passing your order to the kitchen.
orderedPizzas > Stores all current pizza orders (an array).
listeners > Stores all display functions (subscribers).
handleActions() > Check the action type and update the list.
getOrders() > Returns current pizza list.
subscribe(callback) > Add a new display function to be called on update.
notify() > Call all subscribers to update UI (like refresh display).

Benefits of Flux In React

Predictable Data Flow: In flux data move in one direction, so its easy to track and understand how data changes in the app.
Enhanced Debugging: Every data changes with proper actions, so we can easily find Bugs and fix it faster.
Centralized Control: App has centralized control using with dispatcher. all changes in apps are well organized and clean.

Challenges with Flux

Complexity: Flux can feel like too much setup for simple Apps. In simple task It may make the project more complicated.
Boilerplate Code: In Flux, you have to create code for Actions, Dispatcher and Store separately. this means for small setup and application you write to lots of repeated setup code.

What is React Flux