ReactJS Managing State Using Flux

Last modified on: September 7, 2025

<h1 data-start="345" data-end="384"><strong data-start="347" data-end="384">ReactJS Managing State Using Flux</strong></h1>
<p data-start="386" data-end="588">As React apps grow, managing <strong data-start="415" data-end="436">application state</strong> becomes challenging.<br data-start="457" data-end="460" />Flux is an <strong data-start="471" data-end="495">architecture pattern</strong> introduced by <strong data-start="510" data-end="522">Facebook</strong> to manage state in a predictable, <strong data-start="557" data-end="585">unidirectional data flow</strong>.</p>
<hr data-start="590" data-end="593" />
<h2 data-start="595" data-end="618"><strong data-start="598" data-end="618">1. What is Flux?</strong></h2>
<p data-start="620" data-end="717">Flux is not a framework but an <strong data-start="651" data-end="675">architecture pattern</strong>.<br data-start="676" data-end="679" />It enforces a <strong data-start="693" data-end="714">one-way data flow</strong>:</p>
<p data-start="719" data-end="763">➡️ <strong data-start="722" data-end="761">Actions &rarr; Dispatcher &rarr; Store &rarr; View</strong></p>
<p data-start="765" data-end="861">This makes state updates predictable and easier to debug compared to passing props everywhere.</p>
<hr data-start="863" data-end="866" />
<h2 data-start="868" data-end="901"><strong data-start="871" data-end="901">2. Core Components of Flux</strong></h2>
<div class="_tableContainer_1rjym_1">
<div class="_tableWrapper_1rjym_13 group flex w-fit flex-col-reverse" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="903" data-end="1263">
<thead data-start="903" data-end="927">
<tr data-start="903" data-end="927">
<th data-start="903" data-end="919" data-col-size="sm">Component</th>
<th data-start="919" data-end="927" data-col-size="md">Role</th>
</tr>
</thead>
<tbody data-start="953" data-end="1263">
<tr data-start="953" data-end="1051">
<td data-start="953" data-end="969" data-col-size="sm"><strong data-start="955" data-end="966">Actions</strong></td>
<td data-start="969" data-end="1051" data-col-size="md">Objects or methods that describe what happened (e.g., <code data-start="1025" data-end="1047">{ type: "ADD_TODO" }</code>).</td>
</tr>
<tr data-start="1052" data-end="1119">
<td data-start="1052" data-end="1069" data-col-size="sm"><strong data-start="1054" data-end="1068">Dispatcher</strong></td>
<td data-start="1069" data-end="1119" data-col-size="md">Central hub that dispatches actions to Stores.</td>
</tr>
<tr data-start="1120" data-end="1175">
<td data-start="1120" data-end="1136" data-col-size="sm"><strong data-start="1122" data-end="1132">Stores</strong></td>
<td data-start="1136" data-end="1175" data-col-size="md">Manage application state and logic.</td>
</tr>
<tr data-start="1176" data-end="1263">
<td data-start="1176" data-end="1206" data-col-size="sm"><strong data-start="1178" data-end="1205">View (React Components)</strong></td>
<td data-start="1206" data-end="1263" data-col-size="md">Subscribe to Stores and re-render when state changes.</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="1265" data-end="1268" />
<h2 data-start="1270" data-end="1294"><strong data-start="1273" data-end="1294">3. Flux Data Flow</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>User Interaction &rarr; Action &rarr; Dispatcher &rarr; Store &rarr; View (React Component)
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1381" data-end="1476">📌 Unlike MVC (which has complex bidirectional flow), Flux ensures <strong data-start="1448" data-end="1473">single-direction flow</strong>.</p>
<hr data-start="1478" data-end="1481" />
<h2 data-start="1483" data-end="1528"><strong data-start="1486" data-end="1528">4. Simple Example (Todo App with Flux)</strong></h2>
<h3 data-start="1530" data-end="1557">Step 1 &ndash; Define Actions</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>// actions/TodoActions.js
import Dispatcher from "../dispatcher/Dispatcher";

export const addTodo = (todo) =&gt; {
  Dispatcher.dispatch({
    type: "ADD_TODO",
    payload: todo,
  });
};
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1756" data-end="1759" />
<h3 data-start="1761" data-end="1791">Step 2 &ndash; Create Dispatcher</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>// dispatcher/Dispatcher.js
import { Dispatcher } from "flux";
export default new Dispatcher();
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1899" data-end="1902" />
<h3 data-start="1904" data-end="1929">Step 3 &ndash; Create Store</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>// stores/TodoStore.js
import { EventEmitter } from "events";
import Dispatcher from "../dispatcher/Dispatcher";

let todos = [];

class TodoStore extends EventEmitter {
  getTodos() {
    return todos;
  }

handleActions(action) {
    switch (action.type) {
      case "ADD_TODO":
        todos.push(action.payload);
        this.emit("change");
        break;
      default:
    }
  }
}

const todoStore = new TodoStore();
Dispatcher.register(todoStore.handleActions.bind(todoStore));
export default todoStore;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2456" data-end="2459" />
<h3 data-start="2461" data-end="2496">Step 4 &ndash; React Component (View)</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>// App.js
import React, { useEffect, useState } from "react";
import todoStore from "./stores/TodoStore";
import { addTodo } from "./actions/TodoActions";

function App() {
  const [todos, setTodos] = useState(todoStore.getTodos());
  const [task, setTask] = useState("");

useEffect(() =&gt; {
    todoStore.on("change", () =&gt; setTodos([...todoStore.getTodos()]));
  }, []);

const handleAdd = () =&gt; {
    if (task.trim() !== "") {
      addTodo(task);
      setTask("");
    }
  };

return (
    &lt;div style={{ textAlign: "center", marginTop: "40px" }}&gt;
      &lt;h2&gt;Flux Todo App&lt;/h2&gt;
      &lt;input
        type="text"
        value={task}
        onChange={(e) =&gt; setTask(e.target.value)}
      /&gt;
      &lt;button onClick={handleAdd}&gt;Add Task&lt;/button&gt;

&lt;ul&gt;
        {todos.map((t, i) =&gt; (
          &lt;li key={i}&gt;{t}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/div&gt;
  );
}

export default App;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="3398" data-end="3401" />
<h2 data-start="3403" data-end="3431"><strong data-start="3406" data-end="3431">5. Advantages of Flux</strong></h2>
<p data-start="3433" data-end="3579">✅ Predictable state management<br data-start="3463" data-end="3466" />✅ Unidirectional data flow<br data-start="3492" data-end="3495" />✅ Easier debugging (track how data moves)<br data-start="3536" data-end="3539" />✅ Works well with <strong data-start="3557" data-end="3577">React components</strong></p>
<hr data-start="3581" data-end="3584" />
<h2 data-start="3586" data-end="3609"><strong data-start="3589" data-end="3609">6. Flux vs Redux</strong></h2>
<div class="_tableContainer_1rjym_1">
<div class="_tableWrapper_1rjym_13 group flex w-fit flex-col-reverse" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="3611" data-end="3887">
<thead data-start="3611" data-end="3645">
<tr data-start="3611" data-end="3645">
<th data-start="3611" data-end="3629" data-col-size="sm">Feature</th>
<th data-start="3629" data-end="3636" data-col-size="sm">Flux</th>
<th data-start="3636" data-end="3645" data-col-size="sm">Redux</th>
</tr>
</thead>
<tbody data-start="3681" data-end="3887">
<tr data-start="3681" data-end="3733">
<td data-start="3681" data-end="3699" data-col-size="sm">Store</td>
<td data-start="3699" data-end="3717" data-col-size="sm">Multiple stores</td>
<td data-start="3717" data-end="3733" data-col-size="sm">Single store</td>
</tr>
<tr data-start="3734" data-end="3779">
<td data-start="3734" data-end="3752" data-col-size="sm">Dispatcher</td>
<td data-start="3752" data-end="3763" data-col-size="sm">Required</td>
<td data-start="3763" data-end="3779" data-col-size="sm">Not required</td>
</tr>
<tr data-start="3780" data-end="3837">
<td data-start="3780" data-end="3798" data-col-size="sm">Boilerplate</td>
<td data-start="3798" data-end="3810" data-col-size="sm">More code</td>
<td data-start="3810" data-end="3837" data-col-size="sm">Less with Redux Toolkit</td>
</tr>
<tr data-start="3838" data-end="3887">
<td data-start="3838" data-end="3856" data-col-size="sm">Popularity</td>
<td data-start="3856" data-end="3872" data-col-size="sm">Less used now</td>
<td data-start="3872" data-end="3887" data-col-size="sm">Widely used</td>
</tr>
</tbody>
</table>
</div>
</div>
<p data-start="3889" data-end="3990">👉 Today, <strong data-start="3899" data-end="3908">Redux</strong> (inspired by Flux) is more popular because it&rsquo;s simpler and has better tooling.</p>
<hr data-start="3992" data-end="3995" />
<h2 data-start="3997" data-end="4011"><strong data-start="4000" data-end="4011">Summary</strong></h2>
<ul data-start="4013" data-end="4231">
<li data-start="4013" data-end="4075">
<p data-start="4015" data-end="4075">Flux provides <strong data-start="4029" data-end="4057">unidirectional data flow</strong> for React apps.</p>
</li>
<li data-start="4076" data-end="4131">
<p data-start="4078" data-end="4131">Components: <strong data-start="4090" data-end="4128">Action &rarr; Dispatcher &rarr; Store &rarr; View</strong>.</p>
</li>
<li data-start="4132" data-end="4177">
<p data-start="4134" data-end="4177">Ensures <strong data-start="4142" data-end="4174">predictable state management</strong>.</p>
</li>
<li data-start="4178" data-end="4231">
<p data-start="4180" data-end="4231">Basis for <strong data-start="4190" data-end="4199">Redux</strong>, which is now widely adopted.</p>
</li>
</ul>

Web Technology View More