Управление состоянием React с отдачей

Что такое recoil.js для React?

recoil.js — это библиотека управления состоянием для React. Следовательно, его можно использовать вместо usestate в вашем проекте React.

Чем они отличаются друг от друга?

  • Похоже на React (глобальная версия useState)
  • Вы можете очень легко управлять своим состоянием.
  • Он имеет очень простые понятия, такие как атом и селектор.
  • Очень чистая и простая рабочая модель.

Установка:

  • для пакета npm: npm install recoil
  • для пакета yarn: yarn add recoil

Исполняющее государство

Таким образом, в Recoil введены две концепции: атом и селекторы.

import React from 'react';
import { RecoilRoot } from 'recoil';

const App = () => {
  return (
    <RecoilRoot>
      <Component1/>
      <Component2/>
      //...
    </RecoilRoot>
  );
}

Атом:

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

const someState = atom({
  key: 'someUniquekey', // unique for recoil internal reasons
  default: '', // initial value of state/atom
});

Селекторы:

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

const charCountState = selector({
  key: 'charCountState', // Have to Be Unique
  get: ({get}) => {
    const text = get(someState); //pass a atom in this function
    return text.length;
  },
});

Использование состояния:

Есть два способа получить объявленное состояние в наших компонентах. то есть на useRecoilState или useSetRecoilState, useRecoilValue.

useRecoilValue:

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

import { useRecoilValue } from 'recoil';
const CharacterCount = () => {
    const count = useRecoilValue(charCountState);
    //Name of the Atom or selector
    return <>Character Count: {count}</>;
}

useRecoilState:

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

import { useRecoilState } from 'recoil';
const TextInput = () => {
    const [text, setText] = useRecoilState(someState);

    const onChange = (event) => {
        setText(event.target.value);
    };

    return (
        <div>
            <input type="text" value={text} onChange={onChange} />
            <br />
      Value of the state : {text}
        </div>
    );
}

useSetRecoilState:

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

import { useSetRecoilState } from 'recoil';
const TextInput = () => {
    const setText = useSetRecoilState(someState); //CHANGE HERE

    const onChange = (event) => {
        setText(event.target.value);
    };

    return (
        <>
          //OTHER LOGIC
        </>
    );
}

Вывод:

Мы успешно реализовали глобальное состояние с помощью Recoil. Хоть это и была небольшая часть, но ее достаточно, чтобы использовать ее в своих проектах. Это развивающийся проект со многими изменениями, присутствующими явно в синтаксисе или под капотом. Так что я бы не советовал использовать его в больших проектах. Всегда можно попробовать что-то новое, и, на мой взгляд, если вам нравятся крючки, вам понравится использовать Recoil.

Ссылки:



Начало работы | Recoil
Recoil — это библиотека управления состоянием для React, поэтому для использования Recoil необходимо установить и запустить React. …recoiljs.org