Sobes.tech
Back to questions
Middle+
2

Расскажи про useReducer — смысл и как работает?

Companies where asked
Скиф трейд

Answer from AI

sobes.tech AI

useReducer — это хук в React, который используется для управления состоянием компонента, особенно когда логика обновления сложная или зависит от предыдущего состояния.

Он работает по принципу редьюсера из Redux: принимает текущее состояние и действие (action), и возвращает новое состояние. Это позволяет централизовать логику обновления состояния в одной функции.

Пример использования:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

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, initialState);

  return (
    <>
      <p>Счётчик: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

Таким образом, useReducer помогает лучше структурировать обновления состояния, особенно если их много и они зависят от разных типов действий.