Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке Redux?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке **Redux**

**Redux** - це **глобальне сховище стану (state manager)** для JavaScript-застосунків.
Він допомагає **централізовано керувати станом** (даними), щоб різні частини застосунку могли синхронно реагувати на зміни.

> Коротко: Redux - це "єдине джерело правди" (single source of truth)
> для всього стану застосунку.

---

## Основна ідея Redux

React керує **локальним станом компонентів** (`useState`, `useReducer`).
Але коли застосунок стає великим, дані потрібно **ділити між різними компонентами**.

Приклад проблеми:

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

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

Усі пропси `user` доводиться **прокидати через дерево компонентів** -
незручно, важко масштабувати, з'являються помилки.

---

## Redux вирішує це

Він створює **одне спільне сховище (store)**,
куди кладеться весь стан,
і компоненти можуть:

- читати потрібні дані,
- оновлювати їх через "дії" (actions).

---

## Ключові концепції Redux

| Елемент | Що робить | Аналогія |
|---|---|---|
| **Store** | Зберігає весь стан застосунку | Центральний склад даних |
| **Action** | Описує *що сталося* (звичайний об'єкт `{ type, payload }`) | Замовлення на зміну |
| **Reducer** | Чиста функція, яка *каже, як міняти стан* у відповідь на action | Робітник, що обробляє замовлення |
| **Dispatch** | Відправляє action у reducer | Кур'єр, що доставляє замовлення |
| **Selector** | Витягує потрібні дані зі store | Вітрина, де беремо товар |

---

## Приклад

### 1. Reducer - керує змінами

```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 - створюється один раз

```javascript
import { createStore } from "redux";

const store = createStore(counterReducer);
```

### 3. Компоненти підписуються

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

---

## Як працює Redux (покроково)

1. Компонент викликає `dispatch({ type: "increment" })`.
2. Redux передає цю дію (`action`) у `reducer`.
3. `reducer` створює **нову копію стану**.
4. Store повідомляє всі підписані компоненти.
5. Компоненти отримують новий стан через `useSelector`.

---

## Навіщо потрібен Redux у React-застосунках

| Завдання | Чому допомагає Redux |
|---|---|
| Глобальний стан | Усі дані централізовані в одному місці |
| Передбачуваність | Кожна зміна проходить через reducer |
| Спрощене налагодження | Redux DevTools показують історію дій (time travel) |
| Масштабованість | Можна додавати нові reducers (cart, user, products, ui) |
| Незмінність | State не можна мутувати - це робить логіку чистою |
| Інтеграції | Redux Toolkit, Thunks, Saga, RTK Query для асинхронних даних |

---

## Сучасний Redux = Redux Toolkit (RTK)

Сьогодні ніхто не пише "голий" Redux.
Використовують **Redux Toolkit (RTK)** - офіційну надбудову, яка спрощує все:

Автоматично створює store
Спрощує reducers
Додає асинхронні "thunks"
Оптимізує незмінність

Приклад з 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 });
```

---

## Підсумок

| Що | Redux |
|---|---|
| Що це | Централізований state manager |
| Для чого | Щоб керувати станом застосунку в одному місці |
| Як працює | Через Store → Action → Reducer → View |
| Чому популярний | Передбачуваність, прозорість, масштабованість |
| Сучасна реалізація | Redux Toolkit (RTK) |

---

**Коротко:**

> Redux потрібен, коли застосунок стає надто великим,
> і тобі потрібно **централізовано керувати станом** -
> не тягати props, не плодити контексти,
> а мати одну систему, де все під контролем.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати661 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.