Как использовать useReducer в React

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

Основным принципом useReducer является использование функционального подхода к изменению состояния. В качестве аргумента он принимает редуктор, который является функцией обработки состояния, и начальное значение состояния.

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

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:
      throw new Error();
  }
}
export default function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
       dispatch({type: 'increment'})}>+
       dispatch({type: 'decrement'})}>-
    
  );
}

В данном примере мы создали компонент Counter, который использует хук useReducer и начальное значение состояния { count: 0 }. Далее мы создали редуктор reducer, который обрабатывает состояние в зависимости от типа действия. Если action.type равен 'increment', то мы увеличиваем значение состояния на 1, если 'decrement', то уменьшаем на 1.

В функции обработки состояния мы используем оператор switch, который позволяет обрабатывать несколько типов действий. В случае, если тип действия не определен, мы выбрасываем ошибку.

Далее, в компоненте Counter мы используем dispatch метод, который позволяет вызывать определенный тип действия и передавать необходимые параметры. В данном случае мы вызываем dispatch метод при нажатии на кнопку, которая имеет соответствующий тип действия.

Также можно использовать дополнительные параметры, которые могут быть переданы в редуктор. Например:

import React, {useReducer} from 'react';
function reducer(state, action) {
  switch (action.type) {
    case 'set_name':
      return { 
          ...state,
          name: action.payload
      };
    case 'set_age':
      return {
          ...state,
          age: action.payload
      };
    default:
      throw new Error();
  }
}
export default function UserForm() {
  const initialState = { name: '', age: 0 };
  const [state, dispatch] = useReducer(reducer, initialState);
  const handleNameChange = (event) => {
      dispatch({type: 'set_name', payload: event.target.value})
  }
  const handleAgeChange = (event) => {
      dispatch({type: 'set_age', payload: parseInt(event.target.value)})
  }
  return (
    <>
      
        Name:
        
      
      
        Age:
        
      
      
{state.name} is {state.age} years old.
    
  );
}

Здесь мы создали компонент UserForm, который использует хук useReducer и начальное значение состояния { name: '', age: 0 }. Далее мы создали редуктор reducer, который обрабатывает состояние в зависимости от типа действия. В данном случае мы определили типы 'set_name' и 'set_age'.

В функциях обработки изменения значений мы вызываем dispatch метод и передаем соответствующий тип действия и значение параметра.

Далее, в компоненте UserForm мы выводим поля ввода для имени и возраста, а также выводим эти значения на экран. При изменении полей ввода вызываются соответствующие функции обработки изменения значений, которые изменяют состояние и вызывают перерендеринг компонента.

Как можно заметить, useReducer позволяет более удобно управлять состояниями в React и уменьшить количество кода для обработки действий. Это позволяет улучшить производительность и читаемость кода.