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

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

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

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

Контент

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

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

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

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

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

## Що робить `dispatch()`

`dispatch()` - це **тригер для оновлення стану**,
який повідомляє редʼюсеру (**reducer**) - *"що потрібно зробити"*.

> Простіше кажучи:
> `dispatch(action)` → викликає `reducer(state, action)` → повертає новий стан → компонент перемальовується.

---

## Синтаксис

```javascript
const [state, dispatch] = useReducer(reducer, initialState);
```

- `state` - поточний стан
- `dispatch` - функція, яка **надсилає дію** в редʼюсер
- `reducer` - функція, що описує, **як змінюється стан**

---

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

```javascript
import { useReducer } from "react";

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

return (
    <div>
      <p>Лічильник: {state.count}</p>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </div>
  );
}
```

Тут:

1. При натисканні кнопки → викликається `dispatch({ type: "increment" })`
2. React викликає `reducer(state, { type: "increment" })`
3. `reducer` повертає `{ count: state.count + 1 }`
4. React оновлює `state` і **перемальовує компонент** з новим значенням

---

## Як `dispatch` працює "під капотом"

- `dispatch()` не змінює стан напряму
- React викликає `reducer(state, action)`
- Якщо повернутий стан відрізняється, компонент **перерендерюється**

> Це гарантує **чисту логіку** оновлення і **передбачуваність**,
> як у Redux.

---

## Що передається в `dispatch()`

`dispatch` приймає **об'єкт дії** (action) -
зазвичай із полем `type` (обов'язкове) і опціональним `payload` (дані).

```javascript
dispatch({ type: "SET_NAME", payload: "Tim" });
```

У `reducer` ти потім можеш використати ці дані:

```javascript
function reducer(state, action) {
  switch (action.type) {
    case "SET_NAME":
      return { ...state, name: action.payload };
    default:
      return state;
  }
}
```

---

## Приклад з формою

```javascript
function formReducer(state, action) {
  switch (action.type) {
    case "SET_FIELD":
      return { ...state, [action.field]: action.value };
    case "RESET":
      return { name: "", email: "" };
    default:
      return state;
  }
}

function Form() {
  const [state, dispatch] = useReducer(formReducer, { name: "", email: "" });

return (
    <form>
      <input
        value={state.name}
        onChange={(e) =>
          dispatch({ type: "SET_FIELD", field: "name", value: e.target.value })
        }
      />
      <input
        value={state.email}
        onChange={(e) =>
          dispatch({ type: "SET_FIELD", field: "email", value: e.target.value })
        }
      />
      <button type="button" onClick={() => dispatch({ type: "RESET" })}>
        Скинути
      </button>
    </form>
  );
}
```

Тепер `dispatch` - єдиний спосіб змінити стан форми.
Компонент не думає *"що поміняти"*, він просто повідомляє *"що сталося"*.

---

## Особливості `dispatch`

| Особливість | Опис |
|---|---|
| Не змінюється між рендерами | Можна безпечно передавати в контекст |
| Асинхронний усередині React | Стан оновиться в наступному рендері |
| Працює як `dispatch` у Redux | Та сама концепція дій і редʼюсерів |
| Не можна напряму змінювати `state` | Лише через редʼюсер |

---

## Підсумок

| Питання | Відповідь |
|---|---|
| Що робить `dispatch()` | Надсилає дію (`action`) у `reducer`, щоб оновити стан |
| Як працює | `dispatch(action)` → `reducer(state, action)` → `setState(newState)` |
| Що передається | Об'єкт `{ type, payload? }` |
| Коли використовувати | Коли потрібно централізовано керувати станом (особливо складним) |
| Аналогія | "Повідомити системі, що сталося, а не як це змінити" |

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

Для рев’юера

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

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