Suggest an edit

Improve this article

Refine the answer for “What is Redux?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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);
```

### 3. Components subscribe

```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)

1. A component calls `dispatch({ type: "increment" })`.
2. Redux passes this action to the `reducer`.
3. The `reducer` creates **a new copy of the state**.
4. The store notifies all subscribed components.
5. 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts730 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.