Я давно не использовал Redux, и в большинстве моих проектов он действительно спасал меня. пару дней назад один из моих друзей сказал мне, что он использует Jotai, и если я буду использовать эту библиотеку поверх Redux, я никогда больше не буду использовать Redux. ну, он был прав. Jotai намного проще в использовании, и он превратил 5 компонентов в 5 строк кода!
Итак, позвольте мне рассказать больше об этой удивительной библиотеке.
Что такое Джотай?
Jotai — это библиотека управления состоянием для приложений React. Он предоставляет способ управления и совместного использования состояния в приложении React, но с некоторыми ключевыми отличиями:
1- Состояние на основе атома:
Дзётай основан на концепции атомов. Атомы — это единицы состояния, которые можно читать и обновлять независимо. Вы можете думать о них как об отдельных частях состояния, которые можно создавать, изменять и комбинировать. так что по сути вы можете сохранять данные в своем состоянии, например, когда вы используете «useState()», но теперь вы просто пишете «useAtom()».
2- Простота:
Jotai стремится предоставить более простой и интуитивно понятный API для управления состоянием в React. Он спроектирован так, чтобы быть менее сложным по шаблону, чем некоторые другие решения для управления состоянием, что упрощает работу с ним.
3- Неизменяемый:
Джотай по умолчанию обеспечивает неизменность. Когда вы обновляете атом, вы создаете новое значение, а не изменяете существующее. Это помогает обеспечить предсказуемые изменения состояния и лучшую интеграцию с моделью рендеринга React.
4- Интеграция с приостановкой:
Jotai разработан для хорошей работы с функцией React Suspense, которая позволяет более эффективно и оперативно получать и отображать данные.
5- Маленький размер комплекта:
Jotai известен своим небольшим размером пакета, что делает его хорошим выбором для проектов, где минимизация размера пакета JavaScript является проблемой.
6- Удобство для разработчиков:
Jotai разработан с учетом удобства разработчиков и придерживается более функционального стиля программирования, который некоторые разработчики считают более интуитивным и читабельным.
Давайте воспользуемся этим!
Итак, сначала давайте установим его:
npm install jotai // or yarn add jotai
после этого нам нужно создать компонент, содержащий наши данные. например, я назвал его jotaiData.
import { atom } from "jotai";
const Atomdata = atom([]);
export { Atomdata };
теперь у меня есть пустой массив. здесь я сохраняю свои данные. теперь в моем основном компоненте я импортирую его, чтобы иметь возможность его использовать. но мне также следует импортировать useAtom. как я уже сказал, это точно так же, как useState.
import { useAtom } from "jotai";
import { Atomdata } from "./myJotaiComponent/JotaiData";
и теперь я могу написать useState атома и передать ему свои Atomdata.
const [data, setData] = useAtom(Atomdata);
Теперь всякий раз, когда я обновляю свои «данные» с помощью setData, новые данные будут сохраняться в моем AtomData. легко, да?
Можем ли мы сохранять данные, как Redux-persist?
Конечно вы можете! позволь мне показать тебе.
поэтому вместо того, чтобы писать атом, а затем свое состояние, вам нужно внести два изменения. во-первых, вам нужно заменить атом наatomWithStorage, чтобы вы могли импортировать его из «jotai/utils». Кроме того, теперь ваши данные должны иметь имя. так:
import { atomWithStorage } from "jotai/utils";
const Atomdata = atomWithStorage("test", []);
export { Atomdata };
Здесь я назвал свои данные «тест». и это оно! теперь, если вы обновите эти веб-данные, они не исчезнут.
Подробнее о Джотае можно прочитать здесь.
спасибо за чтение. Было ли это полезно? не забудь поддержать🙏❤
