В моем next.js проекте мне понадобился глобальный стейт, я протестировал несколько решений, которые меня не удовлетворили и я написал для себя 60 строк Typescript кода. В этой статье я хочу поделиться с коммьюнити своей первой опенсорсной библиотекой и собрать мнения / баги / замечания, чтобы понять что я возможно упустил.

Что такое Baguni?

Baguni - это библиотека для управления состоянием в React, которая стремится упростить этот процесс, облегчив обмен состоянием между компонентами. Она выступает в качестве альтернативы традиционному хуку useState.

Особенности Baguni

  • Простота и легковесность: Baguni разработана как замена для useState в React, облегчая интеграцию и сокращая необходимость в сложных настройках управления состоянием.

  • Поддержка обмена состоянием: С Baguni легко делиться состоянием между компонентами, что делает управление состоянием в приложении более гибким.

  • Совместимость с React: Baguni без проблем интегрируется с существующими приложениями на React и Next.js.

  • Отсутствие шаблонного кода: С помощью Baguni можно избежать сложных схем управления состоянием, упрощая архитектуру приложения.

  • Низкий порог вхождения: Если вы знакомы с useState, то освоение Baguni не составит труда.

  • Готовность к использованию с Typescript: Библиотека поддерживает как Javascript, так и Typescript.

Преимущества Baguni

Baguni предлагает простой и интуитивно понятный способ управления состоянием, делая её идеальным выбором для проектов, где требуется легковесное решение без излишеств. Отсутствие зависимостей, кроме React, и небольшой размер библиотеки гарантируют высокую производительность и легкость интеграции.

Установка и использование

Установить Baguni можно с помощью npm:

npm install baguni

Пример создания и использования переменной состояния выглядит следующим образом:

// Создание переменной состояния
import { createBaguni } from "baguni";
export const APP_COUNTER = createBaguni<number>(0);
// Использование в компоненте
import { useBaguni } from "baguni";
import { APP_COUNTER } from "../lib/variables";
const Component = () => {
const [appCounter] = useBaguni(APP_COUNTER);
return <div>Counter: {appCounter}</div>;
};
// Использование вне компонента
src/api/get_current_counter_value.ts
import { APP_COUNTER } from "../lib/variables";
const getCurrentCounterValue = () => {
  const counter = APP_COUNTER.get();
  console.log("counter value: ", counter);
};

Заключение

Я попытался сделать baguni заменой useState в React.js / Next.js, также мне нужно было получать значение переменной в SSR компонентах и в api файлах, для этого я добавил еще и .get() метод. Буду рад критике и предложениям по улучшению