Що робить dispatch()?

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

Що робить `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 reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

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

Тут:

При натисканні кнопки → викликається dispatch({ type: "increment" })
React викликає reducer(state, { type: "increment" })
reducer повертає { count: state.count + 1 }
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? }`
Коли використовувати	Коли потрібно централізовано керувати станом (особливо складним)
Аналогія	"Повідомити системі, що сталося, а не як це змінити"

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

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

Premium

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