Skip to main content

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

ReactJunior~1 хв читання
Запропонувати правку

У Redux (і в useReducer у React) функція dispatch() використовується для відправлення дії (action) - тобто для того, щоб повідомити системі, що відбулася подія, і потрібно оновити стан.

Простими словами

dispatch() - це "кур'єр", який доставляє action (опис події) до reducer, а reducer вже вирішує, як змінити state.

Приклад у Redux

javascript
store.dispatch({ type: 'INCREMENT' })
  1. Ми викликаємо dispatch() і передаємо об'єкт action ({ type: 'INCREMENT' }).
  2. Redux відправляє цей action усім reducer'ам.
  3. Reducer(и) повертають новий стан.
  4. Redux оновлює сховище (store).
  5. Підписані компоненти отримують оновлений state -> відбувається рендер з новими даними.

Приклад повного циклу

javascript
// 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 } }
javascript
// Диспетчеризація store.dispatch({ type: 'INCREMENT' }) // state.count тепер = 1

У React (useReducer)

Те саме, тільки локально в компоненті:

javascript
function Counter() { const [state, dispatch] = useReducer(counterReducer, { count: 0 }) return ( <> <p>{state.count}</p> <button onClick={() => dispatch({ type: 'INCREMENT' })}> + </button> <button onClick={() => dispatch({ type: 'DECREMENT' })}> - </button> </> ) }

Коли ти натискаєш кнопку:

  1. dispatch() відправляє дію { type: 'INCREMENT' }
  2. reducer отримує цю дію
  3. Повертає новий стан { count: 1 }
  4. React оновлює компонент з новим значенням

Підсумок

Що робить dispatch()Аналогія
Відправляє action у reducerЯк "повідомити системі", що користувач зробив дію
Запускає процес оновлення стануЯк "викликати подію"
Не змінює state напрямуВін лише "просить" reducer змінити його

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

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

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

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