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

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

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

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

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

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

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

import { atom } from 'jotai';
const countAtom = atom(1);

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

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

import { useAtom } from 'jotai';
const countAtom = atom(1);
function MyComponent() {
  const [count, setCount] = useAtom(countAtom);
  const increment = () => setCount((prevCount) => prevCount + 1);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

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

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

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

Вы можете найти исходный код этого проекта в этом репозитории GitHub.

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

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

npm install jotai

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

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

import { Provider } from "jotai";

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

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { Provider } from "jotai";
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>,
)

Настройка хранилища данных

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

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

import { atom } from "jotai";
export const TodosAtom = atom([]);

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

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

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

Создайте новый файл comComponents/Todo.jsx в каталоге src. В этот файл добавьте приведенный ниже код:

Импортируйте хранилище данных и перехватчик useAtom.

import React, { useState } from 'react';
import { TodosAtom } from '../TodoStore';
import { useAtom } from 'jotai';

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

const Todo = () => {
 
  return (
    <div>
      <input
        placeholder="New todo"
        value={value}
        onChange={event => setValue(event.target.value)}
      />
      <button onClick={handleAdd}>Add Todo</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => handleDelete(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};
export default Todo;

Наконец, реализуйте функции добавления и удаления задач.

 const [value, setValue] = useState('');
 const [todos, setTodos] = useAtom(TodosAtom);
   const handleAdd = () => {
    if (value.trim() !== '') {
      setTodos(prevTodos => [
        ...prevTodos,
        {
          id: Date.now(),
          text: value
        },
      ]);
      setValue(''); 
    }
   };
  const handleDelete = id => {
    setTodos(prevTodos => prevTodos.filter(todo => todo.id !== id));
  };

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

Затем вызывается функция setTodos для обновления списка элементов дел в атоме путем добавления нового элемента. Наконец, после операции сложения состояние value сбрасывается в пустую строку.

С другой стороны, функция handleDelete отвечает за удаление элемента списка дел. Он отфильтровывает элемент списка дел по указанному идентификатору из существующего списка с помощью метода prevTodos.filter. Затем он обновляет список с помощью функции setTodos, фактически удаляя указанный элемент задачи из списка.

Использование Jotai для управления состоянием в приложениях React

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

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