Що таке Redux?

ReactJunior~2 хв читання

Що таке 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 (покроково)

Компонент викликає dispatch({ type: "increment" }).
Redux передає цю дію (action) у reducer.
reducer створює нову копію стану.
Store повідомляє всі підписані компоненти.
Компоненти отримують новий стан через 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, не плодити контексти, а мати одну систему, де все під контролем.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.