Изучение управления состоянием в React с помощью Jotai: практическое руководство

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

Хотя Redux предлагает отличное решение для управления состоянием, его API может оказаться слишком сложным для относительно небольших проектов. Напротив, Jotai, минимальная библиотека управления состояниями, которая использует независимые единицы состояний, называемые атомами, для управления. состояние, устраняет такие проблемы, как сверление пропеллеров, и обеспечивает более простое и масштабируемое управление состоянием. подход.

Что такое Джотай и как это работает?

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

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

Импортировать {атом} отджотай;
константа количество атомов = атом (1);

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

Вот пример, демонстрирующий его использование:

Импортировать { использовать атом } отджотай;
константа количество атомов = атом (1);
функцияМой Компонент() {
константа [count, setCount] = useAtom (countAtom);
константа приращение = () => установитьКоличество((prevCount) => предыдущийКоличество + 1);
возвращаться (


Количество: {count}</p>
Приращение</button>
 </div>
 );
}

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

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

Избавившись от основ, давайте создадим простое приложение To-do React, чтобы лучше понять возможности управления состоянием Jotai.

Управление состоянием в React с помощью Jotai

Для начала, создать React-приложение. Кроме того, вы можете использовать Vite для настройки проекта React. После того, как вы создадите базовое приложение React, установите Jotai в свое приложение.

нпм установить джотай

Затем, чтобы использовать Jotai в своем приложении, вам нужно обернуть все приложение Провайдер компонент. Этот компонент содержит хранилище, которое служит центральным концентратором для предоставления значений атомов во всем приложении.

Кроме того, он позволяет вам объявлять начальное состояние атомов. Обернув ваше приложение Провайдер, все компоненты в приложении получают доступ к определенным вами атомам, и затем они могут взаимодействовать с ними и обновлять состояние через использование атома крюк.

Импортировать { Провайдер } от"джотай";

Теперь оберните приложение в index.js или main.jsx как показано ниже.

Импортировать Реагировать от«реагировать»
Импортировать РеактДОМ от'реакция-дом/клиент'
Импортировать Приложение от'./App.jsx'
Импортировать'./index.css'
Импортировать { Провайдер } от"джотай";
ReactDOM.createRoot(документ.getElementById('корень')).оказывать(



 </Provider>
 </React.StrictMode>,
)

Настроить хранилище данных

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

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

Импортировать {атом} от"джотай";
экспортконстанта TodosAtom = атом([]);

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

Реализуйте функциональность приложения To-Do

Теперь, когда вы настроили Jotai в приложении React и создали атом для управления состоянием приложения, перейдите вперед и создайте простой компонент списка дел, который будет обрабатывать функции добавления, удаления и редактирования списка дел. предметы.

Создать новый компоненты/Todo.jsx файл в источник каталог. В этот файл добавьте следующий код:

1. Импортируйте хранилище данных и использование атома крюк.

   Импортировать Реагировать, {useState} от«реагировать»;
   Импортировать { ТодосАтом } от'../TodoStore';
   Импортировать { использовать атом } отджотай;

2. Создайте функциональный компонент и добавьте элементы JSX.

   константа Сделать = () => {
   
   возвращаться (
   
   
    заполнитель ="Новое дело"
    значение = {значение}
    onChange={event => setValue (event.target.value)}
    />
   Добавить дело</button>
   
   
    {todos.map(делать => (
   
   
    {задача.текст}
    handleDelete (todo.id)}>Удалить</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };