Suggest an edit

Improve this article

Refine the answer for “What does store do in 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 `store` is in Redux

> The **store** is an **object** that:
> 1. holds the entire application state,
> 2. lets you read the current state,
> 3. lets you update it via `dispatch(action)`,
> 4. notifies subscribers (`subscribe`) about changes.

You can think of the `store` as the **single source of truth**:
the entire application state is kept right there.

---

## How to create a store

```javascript
import { createStore } from "redux";
import { counterReducer } from "./counterReducer";

const store = createStore(counterReducer);
```

`createStore()` takes a **reducer**: a function that controls
how the state is updated for different actions.

---

## What the store does

| Method | Purpose |
|---|---|
| `getState()` | Returns the current state |
| `dispatch(action)` | Sends an action to the reducer to change the state |
| `subscribe(listener)` | Subscribes a component or function to changes |
| `replaceReducer(nextReducer)` | Swaps the reducer on the fly (rarely used) |

---

## Example

```javascript
// 1. Reducer
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. Create the store
import { createStore } from "redux";
const store = createStore(counterReducer);

// 3. Subscribe to updates
store.subscribe(() => {
  console.log("State changed:", store.getState());
});

// 4. Dispatch actions
store.dispatch({ type: "INCREMENT" });
store.dispatch({ type: "INCREMENT" });
store.dispatch({ type: "DECREMENT" });
```

What happens:

1. `dispatch` sends an action;
2. The store calls `reducer(state, action)`;
3. The reducer returns a new state;
4. The store saves it and notifies all subscribers;
5. Components receive the new state and re-render.

---

## Store in a React application

Usually used together with `react-redux`:

```javascript
import { Provider, useSelector, useDispatch } from "react-redux";
import { store } from "./store";

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

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

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

Here `Provider` makes the `store` available to all components,
and the `useSelector` and `useDispatch` hooks let you work with it.

---

## Summary

| What the store does | In short |
|---|---|
| Holds the state | The entire application state in one place |
| Manages changes | Updates the state through the `reducer` |
| Notifies listeners | Notifies on every change |
| Integrates with React | Through `<Provider>` and the `useSelector` / `useDispatch` hooks |

---

**In short:**

> The `store` is the "single brain" of a Redux application:
> it knows the entire state, listens for actions, calls reducers, and updates the interface.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.