Recoil: руководство для начинающих по управлению состоянием в React

Recoil: руководство для начинающих по управлению состоянием в React

Recoil — это библиотека управления состоянием для приложений React, которая обеспечивает простой и эффективный способ управления сложным состоянием приложения. Он построен на основе направленного ациклического графа (DAG), который представляет собой структуру данных, представляющую состояние вашего приложения в виде набора узлов и ребер без циклов или циклов.

В этой статье мы рассмотрим основы Recoil и то, как он может помочь вам управлять состоянием в ваших приложениях React.

Что такое отдача?

Recoil — это библиотека управления состоянием для приложений React, которая позволяет управлять сложным состоянием масштабируемым и эффективным способом. Он предназначен для предоставления простого и декларативного API, который упрощает определение и управление состоянием вашего приложения.

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

Атомы в отдаче

Атомы являются основными строительными блоками Recoil. Они представляют отдельные части состояния в вашем приложении и могут рассматриваться как «узлы» в DAG.

Чтобы определить атом в Recoil, вы используете функцию atom, которая принимает объект в качестве аргумента. Объект должен иметь ключевое свойство, которое является уникальным идентификатором атома, и свойство по умолчанию, которое является начальным значением атома.

Вот пример того, как определить атом в Recoil:

import { atom } from 'recoil';

const counterState = atom({
  key: 'counterState',
  default: 0,
});

Этот код определяет атом с именем counterState, который имеет начальное значение 0.

Селекторы в Recoil

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

Чтобы определить селектор в Recoil, вы используете функцию селектора, которая принимает объект в качестве аргумента. Объект должен иметь ключевое свойство, которое является уникальным идентификатором селектора, и свойство get, которое является функцией, вычисляющей производное состояние.

Вот пример того, как определить селектор в Recoil:

import { atom, selector } from 'recoil';

const counterState = atom({
  key: 'counterState',
  default: 0,
});

const doubledCounterState = selector({
  key: 'doubledCounterState',
  get: ({ get }) => {
    const counter = get(counterState);
    return counter * 2;
  },
});

Этот код определяет два узла в графе: атом с именем counterState и селектор с именем doubledCounterState. Селектор doubledCounterState зависит от атома counterState и вычисляет новое значение, удваивая значение counterState.

Обновление состояния в Recoil

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

Вот пример использования useSetRecoilState для обновления значения атома в Recoil:

import { atom, useSetRecoilState } from ‘recoil’;

const counterState = atom({
  key: ‘counterState’,
  default: 0,
});

function IncrementButton() {
  const setCounter = useSetRecoilState(counterState);

  function handleClick() {
    setCounter((prevCounter) => prevCounter + 1);
  }

 
  return (
    <button onClick={handleClick}>
      Increment
    </button>
  );
}

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

Заключение

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

Используя атомы и селекторы, вы можете разбить сложное состояние на более мелкие, более управляемые части и получить новое состояние на основе существующих атомов и селекторов. А с помощью хуков, таких как useRecoilValue и useSetRecoilState, вы можете легко получить доступ и обновить состояние вашего приложения из ваших компонентов React.

Если вы ищете современную, гибкую и мощную библиотеку управления состоянием для своих приложений React, вам определенно стоит попробовать Recoil!