Начало работы с отдачей

Что такое отдача? Recoil - это библиотека управления состоянием для React. Зачем это нужно? Для меня это было намного проще и естественнее в использовании, чем redux, особенно если вы знакомы с использованием перехватчиков реакции. Я собираюсь рассказать, как настроить простую настройку.

Давайте начнем!

Для установки возвратного пакета типа

npm install recoil

Или если вы используете пряжу

yard add recoil

После установки отдачи нам нужно импортировать RecoilRoot и предоставить компонентам доступ к отдаче, вложив их в RecoilRoot. Я сделал это в своем index.js

Настройка вашего файла Atom

Прежде чем переходить к состоянию и хукам useState vs useRecoilState, давайте настроим атомный файл. Те из вас, кто знаком с redux, заметили, что файл atom похож на store.

Первое, что нам нужно сделать, это импортировать {атом} из «отдачи».

Затем нам нужно экспортировать атом, как показано в строках 3–6. Ключ в строке 4 может быть любым, но он должен быть уникальным. Строка 5 - значение по умолчанию. В случае с пользователем я устанавливаю его на пустой объект.

Если нам нужно больше атомов, к которым мы хотим получить доступ во всем приложении, мы можем добавить их в файл атома.

Доступ к атомам

Итак, теперь у нас есть пользовательский атом, к которому можно получить доступ из любой точки приложения. Но как? Как и в случае с хуком useState, нам нужно импортировать хуки из recoil. Также нам нужно импортировать атом, к которому мы хотим получить доступ.

// importing hooks from recoil
import { useSetRecoilState, useRecoilState, useRecoilValue } from "recoil"
// importing atoms from Atoms file. I had mine in a folder called Atoms and the name of the file was Atoms.js
import { userAtom } from "./Atoms/Atoms"

useRecoilState, useSetRecoilState, useRecoilValue

Обычно при использовании хука useState это будет именно он. С отдачей у нас есть useRecoilState, useSetRecoilState, useRecoilValue.

Мы используем useRecoilState очень похоже на useState.

// useState vs useRecoilState

const [user, setUser] = useState({}); // useState
const [user, setUser] = useRecoilState(userAtom); // useRecoilState
// they are almost the same! the default value for useState is set inside (). the default value for useRecoilState is our userAtom that we imported.

useRecoilState позволяет нам писать и читать userAtom. useSetRecoilState используется только для записи в атом, а useRecoilValue используется только для чтения из него. Если userAtom когда-либо изменяется из любого места в приложении, этот компонент будет перерисован с обновленными значениями.

// for example, if were in another component somewhere in the app and needed to know who the user was, we can import the userAtom and import the useRecoilValue hook from recoil.
import { userAtom } from "./Atoms/Atoms"
import { useRecoilValue } from "recoil"
function ComponentName(){
   
    const user = useRecoilValue(userAtom);
    return (
        <div>Hi {user.name}! // assuming the userAtom object has a name key value pair.
    )
}

В качестве альтернативы, если бы у нас был компонент, который обновляет userAtom, но компоненту не нужно ничего отображать о пользователе, мы могли бы использовать setRecoilState. Поскольку этот компонент не будет считывать состояние отдачи, когда вы устанавливаете RecoilState, компонент не будет без необходимости перерисовывать при обновлении атома. (оптимизация!)

const setUser = setRecoilState(userAtom)

Для получения дополнительной информации об использовании хуков useState я написал запись в блоге здесь.

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

Я не углублялся в динамические атомы, но если вы хотите узнать больше, вы можете найти документацию по Recoil на https://recoiljs.org/.