Слишком много useState? Давайте useReducer!

Современный фронтенд похож на старую добрую веб-разработку, но с одной загвоздкой: страница в браузере так же сложна, как и бэкенд.

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

И самое распространенное в любом WebApp - это управление состояниями.

Весь этот пролог был призван ответить на один вопрос: "Зачем нам состояние во Frontend-приложении?".

В этом посте мы рассмотрим более эффективное управление состояниями в нашей любимой библиотеке React.

Как почти все из вас знают, хуки и наиболее часто используемый хук для управления локальным состоянием: useState

UseState отлично работает во многих сценариях и обеспечивает стабильное решение, не обращаясь к более тяжелым решениям, таким как redux, mobx и т.д.

Давайте рассмотрим небольшой пример базового хука useState:

const { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);
  return (
    <article>
      <h1>Count: <code>{count}</code></h1>
      <button onClick = {() => setCount(i => i++)}>Increase count</button>
    </article>
  )
}

Выглядит очень прямолинейно, очень невинно.

И большинство компонентов листа будут выглядеть более или менее похоже, даже без состояния.

Я бы использовал реквизиты в большинстве случаев по сравнению с состоянием. Если вы должны использовать состояние, этот компонент не должен содержать большую часть JSX, только голые части, передающие состояние другим компонентам в качестве реквизитов (конечно, есть исключения).

Но это аргумент для другого раза.

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

Рассмотрим следующую схему нашего приложения:

Учитывая вышеприведенные схемы, если мы сделаем компонент контроллера, то он будет выглядеть примерно так:

const MyApp = () => {
  const [shoudlOpenNewDataForm, toggleNewDataForm] = useState(false);
  const [confirmSave, toggleSaveConirmationModal] = useState(false);
  const [confirmReset, toggleResetModal] = useState(false);
  // ...
}

Теперь предположим, что нам нужно добавить еще одно взаимодействие, в котором мы хотим разрешить редактирование данных. Для этого нам потребуется открыть ту же форму, но с некоторыми данными, что и форма "Новые данные".

И по завершении корректировки данных мы хотим подтвердить, хочет ли пользователь сохранить новое состояние.

Кроме того, мы хотим разрешить удаление данных из формы редактирования данных.

Это потребует трех дополнительных состояний для обработки этого нового добавления состояний пользовательского интерфейса:

const MyApp = () => {
  const [shoudlOpenNewDataForm, toggleNewDataForm] = useState(false);
  const [confirmSave, toggleSaveConirmationModal] = useState(false);
  const [confirmReset, toggleResetModal] = useState(false);
  
  const [dataBeingEdited, setData] = useState({});
  const [confirmDelete, toggleDeleteConfirmationModal] = useState(false);
  // ... 
}

Все еще достаточно просто?

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

Для этого потребуется еще несколько дополнительных useState и useRefs

Я могу продолжать добавлять еще несколько сценариев использования, чтобы усложнить состояние.

И произойдет одно: логика контроллера будет становиться все больше и больше подвержена ошибкам.

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

Давайте использоватьReducer

UseReducer

Хук useReducer является частью основной библиотеки, позволяя нам работать с состоянием путем диспетчеризации действий.

Этот хук работает почти так же, как useState.

Давайте рассмотрим небольшой пример:

import { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case "open-modal":
      return { modal: action.payload.modal };
    case "close-modal":
      return { modal: null };
    default:
      return state;
  }
};

const Modal = ({ close, name }) => (
  <div>
    <h3>{name} Modal</h3>
    <button onClick = {close}>Close</button>
  </div>
);

export const MyApp = () => {
  const [state, dispatch] = useReducer(reducer, { modal: null });
  const openModal = (modal) =>
    dispatch({
      type: "open-modal",
      payload: { modal },
    });
  const closeModal = () => dispatch({ type: "close-modal" });
  return (
    <>
      {state.modal === "info" && <Modal close = {closeModal} name="Info" />}
      {state.modal === "confirmation" && (
        <Modal close = {closeModal} name="Confirmation" />
      )}
      <button onClick = {() => openModal("info")}>Open Info Modal</button>
      <button onClick = {() => openModal("confirmation")}>
        Open Confirmation Modal
      </button>
    </>
  );
};

В приведенном выше примере мы создали Modal для показа некоторого содержимого на основе переданных параметров.

Приведенный выше сценарий можно реализовать многими способами, но цель состоит в том, чтобы продемонстрировать крючок useReducer.

Вот несколько важных элементов useReducer:

Параметры

Функция редуктора

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