Управление глобальным состоянием в приложениях JavaScript, особенно если вам нужно, чтобы оно было доступно как в контексте React, так и в других контекстах, может оказаться сложной задачей. Существующие библиотеки часто требуют сложной настройки, ненужной сложности и тесно связаны с React. Но что, если бы вы могли управлять государством с элегантностью и простотой складывания бумаги? Введите Origami-State-Manager (OSM).

Что такое OSM?

Origami-State-Manager (OSM), произносится как "потрясающе", — это легкая, гибкая и масштабируемая библиотека управления состоянием. Вдохновленный японским искусством оригами, которое превращает простой лист бумаги в замысловатые узоры, OSM позволяет вам управлять глобальным состоянием вашего приложения с такой же элегантностью. Как и бумага, он невероятно легкий, что делает его идеальным для тех задач, где важны простота и производительность.

Почему OSM?

Путь к созданию OSM начался с поиска решения, которое могло бы:

• Сверните шаблон: Управление состоянием должно быть простым и требовать как можно меньше настроек.
• Будьте универсальными: Беспрепятственно работайте как в контексте React, так и в других контекстах.
• Сохраняйте легкость: Не перегружайте пакет ненужным кодом.
• Оставайтесь гибкими и масштабируемыми: Легко адаптируйтесь к различным потребностям проекта, сохраняя при этом производительность.

Если вы устали от переусложненных решений и хотите что-то, что просто работает, OSM может быть «потрясающим» инструментом, который вам нужен.

Основные характеристики

• Минимальная настройка: Быстро определяйте свое глобальное состояние и управляйте им с помощью чистого, интуитивно понятного API.
• Совместимость React и не-React: Доступ к состояниям и их обновление можно получить как из компонентов React, так и из простых функций JavaScript.
• Легкость: Легкая, как бумага, OSM обеспечивает быстроту и отзывчивость вашего приложения.
• Параметры сохранения: Сделайте ваши состояния постоянными с помощью простой настройки.

Начало работы с OSM

Готовы добавить немного OSM в свое приложение? Вот как начать:

1. Установите библиотеку:

npm install origami-state-manager

2. Создать магазин:

Магазин — это место, где живут все ваши глобальные состояния. Настроить его так же просто, как передать начальные значения состояния в createStore:

// store.ts
import { createStore } from "origami-state-manager";

const initialValues = {
  origami: 0,
  osmness: 0,
};

export const store = createStore(initialValues);

Вы также можете сделать магазин постоянным, указав его название:

export const store = createStore(initialValues, "myOSMness");

3. Состояние доступа и обновления:

Для компонентов React используйте перехват useStateListener для доступа и обновления состояния:

import { store } from "./store";
import { useStateListener } from "origami-state-manager";

function OrigamiComponent() {
  const origami = useStateListener("origami", store);

  return (
     store["origami"].value = new Date().getSeconds()}>
      Origami Count: {origami}
    
  );
}

4. Состояние доступа в нереагирующих функциях:

Вы также можете легко работать с состоянием вне React:

// utils.js

function getProfile() {
  let profile = store["profile"].value;
  if (!profile) {
    store["profile"].value = {};
  }

  return store["profile"].value;
}

Примеры использования

OSM идеально подходит для случаев, когда:

• Вам нужно легкое решение для простого глобального управления состоянием.
• Ваш проект включает в себя как React, так и не-React логику, которая должна иметь общее глобальное состояние.
• Вы хотите избежать сложности больших библиотек, таких как Redux или MobX.

Осторожно: впереди еще несколько упс!

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

Вклад в OSM

Заинтересованы в том, чтобы помочь сделать OSM еще более интересным? Вклады приветствуются! Чтобы начать, ознакомьтесь с правилами внесения взносов.

Будьте в курсе

Журнал изменений регулярно пополняется всеми новыми изменениями и улучшениями.

Заключительные мысли

Origami-State-Manager (OSM) стремится предоставить простое, но мощное решение для глобального управления состоянием без раздувания. Сохраняя минимальную настройку и высокую производительность, OSM позволяет вам сосредоточиться на создании функций, а не бороться со сложностью состояний.

Попробуйте и ощутите новый уровень OSM-ности в своих проектах!

Начните работу с OSM сегодня: npm: origami-state-manager