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

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

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

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

Контент

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

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

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

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

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

## Що таке `store` у Redux

> **Store** - це **об'єкт**, який:
> 1. зберігає весь стан застосунку,
> 2. дозволяє отримувати поточний стан,
> 3. дозволяє оновлювати його через `dispatch(action)`,
> 4. сповіщає підписників (`subscribe`) про зміни.

Можна думати про `store` як про **єдине джерело правди** (*single source of truth*) -
весь стан застосунку зберігається саме там.

---

## Як створити store

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

const store = createStore(counterReducer);
```

`createStore()` приймає **reducer** - функцію, яка керує тим,
як оновлюється стан при різних діях.

---

## Що робить store

| Метод | Призначення |
|---|---|
| `getState()` | Повертає поточний стан |
| `dispatch(action)` | Відправляє дію (action) до reducer для зміни стану |
| `subscribe(listener)` | Підписує компонент або функцію на зміни |
| `replaceReducer(nextReducer)` | Змінює reducer "на льоту" (рідко використовується) |

---

## Приклад роботи

```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. Створюємо store
import { createStore } from "redux";
const store = createStore(counterReducer);

// 3. Підписуємось на оновлення
store.subscribe(() => {
  console.log("State змінився:", store.getState());
});

// 4. Відправляємо дії
store.dispatch({ type: "INCREMENT" });
store.dispatch({ type: "INCREMENT" });
store.dispatch({ type: "DECREMENT" });
```

Що відбувається:

1. `dispatch` відправляє action;
2. Store викликає `reducer(state, action)`;
3. Reducer повертає новий state;
4. Store зберігає його і сповіщає всіх підписників;
5. Компоненти отримують новий стан і перерендерюються.

---

## Store у React-застосунку

Зазвичай використовується разом з `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>
  );
}
```

Тут `Provider` робить `store` доступним усім компонентам,
а хуки `useSelector` і `useDispatch` дозволяють працювати з ним.

---

## Підсумок

| Що робить store | Коротко |
|---|---|
| Зберігає state | Весь стан застосунку в одному місці |
| Керує змінами | Оновлює стан через `reducer` |
| Оповіщає слухачів | Сповіщає про кожну зміну |
| Інтегрується з React | Через `<Provider>` і хуки `useSelector` / `useDispatch` |

---

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

> `store` - це "єдиний мозок" Redux-застосунку:
> він знає весь стан, слухає дії, викликає редюсери і оновлює інтерфейс.

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

Для рев’юера

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

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