Как эффективно управлять состоянием с помощью React (используя Recoil)

Итак, возможно, вы недавно начали свое путешествие с React, но столкнулись с адом управления состоянием. Первый опыт, который я помню в первый месяц работы с React, — это передать хук обновления состояния в 10 слоев дочерних компонентов, а затем вернуться на следующий день и попытаться расшифровать абсолютные макароны кода.

Не волнуйтесь, Recoil вам в помощь. Есть 2 основные, очень простые функции Recoil, которые сразу же упростят вам жизнь: атомы и перехватчики состояний.

Прежде всего установите Recoil и инициализируйте приложение React с помощью:

npm i recoil
npm i react
npx create-react-app counter-app

В этом руководстве я буду приводить примеры, которые могут относиться к простому приложению кнопки счетчика, которое состоит из приложения, содержащего компоненты дисплея и кнопки:

App = <>
         <Display/>
         <CounterButton/>
      </>

Нам понадобится состояние count, которое совместно используется Display и CounterButton.

Атомы. Они просто определяют шаблон объектов состояния, состояние которых вы, возможно, захотите сохранить. В нашем примере мы могли бы создать новый файл atoms.js и определить атом-счетчик:

import {atom} from "recoil";
export const counterAtom = atom({
    key: "counter",
    default: 0
})

Несколько вещей, о которых следует помнить:

Определите все переменные атома с атомом в конце. Это поможет вам управлять своими атомами в коде в будущем и сделать код более понятным.
atom({key:"", по умолчанию: 0}) создает объект атома, где ключ должен быть уникальным, а значение по умолчанию будет начальным значением состояния.
Свойство key может быть полезно, если вы отлаживаете или печатаете много атомов и их значений.

Этот атом будет доступен в вашем приложении во всех файлах при импорте.

Перехватчики состояния. Они просто геттеры и сеттеры, используемые для доступа и обновления ваших атомов. CounterButton может использовать хук setter для обновления значения:

import {useSetRecoilState} from "recoil";
import {counterAtom} from "atoms";
export function CounterButton {
   setCounter = useSetRecoilState(counterAtom);
   return <>
      <button onClick={() => {
         setCounter(prevValue => prevValue + 1);
      }}/>
   </>;
}

Здесь мы просто определяем кнопку, которая вызовет сеттер, чтобы установить значение counterAtom на предыдущее значение + 1 при нажатии. Чтобы отобразить это, определите Отображение как:

import {useRecoilValue} from "recoil";
import {counterAtom} from "atoms";
export function Display {
   counter = useRecoilValue(counterAtom);
   return <>
      {counter}
   </>;
}

Обратите внимание, как я использовал useRecoilValue и useSetRecoilState для функций значения и установки соответственно. Вы также можете получить оба одновременно:

[counter, setCounter] = useRecoilState(counterAtom);

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

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

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

Читайте и исследуйте больше на https://recoiljs.org/.

Как эффективно управлять состоянием с помощью React (используя Recoil)

Вопросы по теме