Scaling React: From useState to Redux + Saga

Bumuthuchamod

3 min read

·

Apr 4, 2026

--

1

Listen

Share

Press enter or click to view image in full size

When we first started working with React, managing state felt simple.
. useState
. props
. small components
Everything worked fine.
But as the project started growing… things became messy.

The Problem with Default React State
In small apps:
useState works perfectly & Passing props is easy.

But in large applications:
Props drilling becomes messy.
State scattered everywhere.
Hard to debug.
Difficult to maintain.

Example:

If you pass props everywhere → it becomes messy 😵

So, What’s the Solution?
solution is “Redux”.
Redux gives, one central place to store all frontend data.

Component → Redux Store → Component

(Instead of passing data through many components, we directly access it from a single source.)

So simply we can say,
💡 “Redux = Global State Management”

Before Redux (Props drilling)
Component A → Component B → Component C → Component D

After Redux
All components → Redux Store

Let’s consider about,
What is Redux?

Redux is a state management library.

It helps you:

• Store global state
  Manage updates in a predictable way
  Debug easily

Core idea:

State is stored in one place (Store), and updated through actions.

⚙️ Core Pieces of Redux

1️) Store
Holds all application state.

2) Actions
Objects that describe what happened.

Example:

{ type: "FETCH_USERS" }

3) Reducer
A pure function that updates state based on actions.

Important rule:
Reducers must be pure functions.

That means:

No API calls
No side effects
Only return new state

Problem: Where Do API Calls Go?

Now comes the important issue. When You dispatch an action, Reducer receives it.

But,
Reducer cannot call APIs

Why?
Reducer must be pure.
API calls are async (side effects).

So now the question is “Who handles API calls?”

Then, Enter Redux-Saga

Redux-Saga is a middleware. It sits between: Action and Reducer.
This handles: API calls, Async logic, Side effects.

Redux-Saga listens to actions. When an action is dispatched,
- Saga catches it.
- Calls API.
- Gets response.
- Dispatches new action.
- Reducer updates store.

Press enter or click to view image in full size

Let’s break the full lifecycle.

(1️) Component Layer
User clicks button → action dispatched

dispatch({ type: "FETCH_USERS_REQUEST" })

(2️) Action Layer
Action is sent to Redux.

(3️) Saga Layer
Saga listens:

takeEvery("FETCH_USERS_REQUEST", fetchUsersSaga)Saga:

Saga:
Calls API, Waits for response.

(4️) Service Layer (API Call)
Saga calls backend:

const response = yield call(api.getUsers);

(5️) Saga Again
If success:

dispatch({ type: "FETCH_USERS_SUCCESS", payload: data }

If fail:

dispatch({ type: "FETCH_USERS_FAILURE", error })

(6️) Reducer Layer
Reducer updates state based on action.

(7️) Store Update
Redux store updates.

(8️) UI Re-render
Component gets updated data → UI updates automatically.

Why Redux + Saga is Powerful (in Large Projects)

Without Redux:

• State is everywhere.
• Hard to track changes.
• Debugging is difficult.

With Redux + Saga:

✔ Centralized state.
✔ Predictable flow.
✔ Easy debugging.
✔ Clean separation of concerns.
✔ Better async handling.
✔ Scalable architecture.

🔥 Final Thought

React alone is powerful. But when applications scale, structure matters more than simplicity.

Redux and Saga bring:
Control
Predictability
Scalability
More importantly, they help developers think in a structured way, which is essential when working on large-scale applications.

Note

If you’re currently struggling with state management in React,
you’re not alone — every developer goes through this stage.
The key is not just learning tools,
but understanding why they exist and when to use them.

Stay tuned!!!