What is Redux?

ReactJunior~3 min read

What Redux is

Redux is a global state store (state manager) for JavaScript applications. It helps manage state (data) centrally so that different parts of the application can react to changes in sync.

In short: Redux is the "single source of truth" for the entire application state.

The core idea of Redux

React manages local component state (useState, useReducer). But when an application grows large, data needs to be shared between different components.

Example of the problem:

javascript

// App.jsx
function App() {
  const [user, setUser] = useState(null);

  return (
    <>
      <Navbar user={user} />
      <Dashboard user={user} />
      <Settings user={user} />
    </>
  );
}

All user props have to be passed down through the component tree, which is inconvenient, hard to scale, and error-prone.

Redux solves this

It creates a single shared store, where all the state lives, and components can:

read the data they need,
update it through "actions".

Key Redux concepts

Element	What it does	Analogy
Store	Holds the entire application state	Central data warehouse
Action	Describes what happened (a plain object `{ type, payload }`)	An order for a change
Reducer	A pure function that says how to change the state in response to an action	A worker who processes the order
Dispatch	Sends an action to the reducer	A courier who delivers the order
Selector	Pulls the needed data out of the store	A shelf where we grab the item

Example

1. Reducer - manages changes

javascript

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

2. Store - created once

javascript

import { createStore } from "redux";

const store = createStore(counterReducer);

javascript

import { Provider, useSelector, useDispatch } from "react-redux";

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <>
      <p>{count}</p>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

How Redux works (step by step)

A component calls dispatch({ type: "increment" }).
Redux passes this action to the reducer.
The reducer creates a new copy of the state.
The store notifies all subscribed components.
Components get the new state via useSelector.

Why Redux is needed in React applications

Task	Why Redux helps
Global state	All data is centralized in one place
Predictability	Every change goes through a reducer
Simplified debugging	Redux DevTools show the history of actions (time travel)
Scalability	New reducers can be added (cart, user, products, ui)
Immutability	State cannot be mutated, which keeps logic pure
Integrations	Redux Toolkit, Thunks, Saga, RTK Query for asynchronous data

Modern Redux = Redux Toolkit (RTK)

Today nobody writes "plain" Redux. People use Redux Toolkit (RTK), the official layer that simplifies everything:

It automatically creates the store It simplifies reducers It adds asynchronous "thunks" It optimizes immutability

Example with RTK:

javascript

import { configureStore, createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    increment: state => { state.count++ },
    decrement: state => { state.count-- },
  },
});

export const { increment, decrement } = counterSlice.actions;
export const store = configureStore({ reducer: counterSlice.reducer });

Summary

What	Redux
What it is	A centralized state manager
What for	To manage application state in one place
How it works	Through Store → Action → Reducer → View
Why it's popular	Predictability, transparency, scalability
Modern implementation	Redux Toolkit (RTK)

In short:

Redux is needed when an application grows too large, and you need to manage state centrally, not drag props around, not multiply contexts, but have a single system where everything is under control.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.