Якщо ви працюєте з React і набридло передавати пропси всюди або працювати з безладним станом, Jotai може стати вашим новим найкращим другом. Я нещодавно почав використовувати цю бібліотеку і знайшов її дуже зручною для керування глобальним станом. Вона дозволяє значно спростити управління станом, і в цьому блозі я покажу, як налаштувати Jotai, створити базовий лічильник і додати залежний стан для цікавості.

Чому Jotai?

Jotai — це легка бібліотека для керування станом у React, яка ідеально підходить для тих, хто хоче уникнути складних налаштувань, як у Redux. У Jotai використовуються "атоми" для зберігання стану, і вони працюють у будь-якій частині вашого додатка. Це дозволяє створювати залежні стани, що робить роботу з ним дуже зручною. Я використовував його в своїх проєктах, і це справжній прорив для спрощення коду.

Інсталяція

Щоб почати використовувати Jotai у вашому проєкті, потрібно встановити його. Якщо ви починаєте з чистого листа, створіть новий React-додаток за допомогою Create React App:

npx create-react-app my-jotai-app
cd my-jotai-app

Після цього встановіть Jotai через npm або yarn:

npm install jotai

або

yarn add jotai

Тепер ви готові до програмування!

Створення базового лічильника

Створимо простий лічильник, щоб побачити, як працює Jotai. Для цього в папці src створіть новий файл під назвою counter.js.

Крок 1: Створення атома

Атоми — це основа Jotai. Вони зберігають ваш стан. У файлі counter.js додайте наступний код:

import { atom } from 'jotai';

export const countAtom = atom(0);

Це створює атом countAtom, який ініціалізується значенням 0. Це можна порівняти з глобальною змінною, яку можна змінювати з будь-якої частини вашого додатка.

Крок 2: Створення компонента лічильника

Тепер використаємо цей атом у компоненті. Оновіть файл App.js наступним чином:

import React from 'react';
import { useAtom } from 'jotai';
import { countAtom } from './counter';

function App() {
const [count, setCount] = useAtom(countAtom);

return (

);
}

export default App;

Тепер ви можете використовувати значення count і змінювати його за допомогою кнопок. Кнопки збільшують або зменшують значення лічильника.

Запустіть додаток за допомогою npm start, і ви побачите працюючий лічильник.

Додавання залежного стану

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

Крок 3: Створення похідного атома

У файлі counter.js додайте новий атом, що залежить від countAtom:

import { atom } from 'jotai';

export const countAtom = atom(0);
export const doubleCountAtom = atom((get) => get(countAtom) * 2);

• doubleCountAtom використовує функцію для отримання значення countAtom і множить його на 2.
• Це похідний стан, який автоматично оновлюється, коли змінюється countAtom.

Крок 4: Відображення подвоєного лічильника

Оновіть файл App.js, щоб додати відображення подвоєного лічильника:

import React from 'react';
import { useAtom } from 'jotai';
import { countAtom, doubleCountAtom } from './counter';

function App() {
const [count, setCount] = useAtom(countAtom);
const [doubleCount] = useAtom(doubleCountAtom); // тільки зчитуємо значення

return (

);
}

export default App;

Тепер, коли ви натискаєте кнопку "Increment", перший лічильник збільшується на 1, а подвоєний лічильник збільшується на 2. Це магія!

Поради для покращення

• Грайте з атомами: Спробуйте додати більше атомів, наприклад, totalCount, що додає обидва лічильники.
• Перевірте документацію: Ознайомтесь з jotai.org для додаткових можливостей, таких як сім'ї атомів або асинхронні атоми.
• Створіть щось: Спробуйте створити список справ або маленьку гру для практики.

Завершення

Jotai — це чудовий інструмент для зберігання чистого і глобального стану в React. Завдяки всього кільком рядкам коду ви можете створити лічильник і зв'язати стани. Я використовую його в своїх проєктах, і він значно спростив процес. Спробуйте і поділіться своїми результатами в коментарях!

Якщо вам сподобалося, підписуйтеся на мене, щоб отримувати більше порад по React, або поділіться своїми проєктами на Jotai. Удачі в кодуванні!

Перекладено з: Getting Started with Jotai: A Simple Guide to State Management in React