قد تكون إدارة الحالة العالمية في تطبيقات JavaScript، خاصة عندما تحتاج إليها للوصول إليها عبر سياقات React وغير React، أمرًا صعبًا. غالبًا ما تتضمن المكتبات الموجودة إعدادًا ثقيلًا وتعقيدًا غير ضروري، كما أنها مقترنة بإحكام بـ React. ولكن ماذا لو كان بإمكانك إدارة حالتك بأناقة وبساطة طي الورق؟ أدخل أوريغامي-State-Manager (OSM).

ما هو OSM؟

Origami-State-Manager (OSM)، يُنطق "رائع،" هي مكتبة إدارة حالة خفيفة الوزن مصممة لتكون بسيطة ومرنة وقابلة للتطوير. مستوحى من فن الأوريجامي الياباني، الذي يحول ورقة عادية إلى تصميمات معقدة، يمكّنك OSM من إدارة الحالة العالمية لتطبيقك بنفس الأناقة. تمامًا مثل الورق، فهو خفيف الوزن بشكل لا يصدق، مما يجعله مثاليًا للتطبيقات حيث البساطة والأداء مهمان.

لماذا OSM؟

بدأت الرحلة نحو بناء OSM كبحث عن حل يمكنه:

• تصغير النمط المعياري: يجب أن تكون إدارة الحالة واضحة وتتطلب أقل قدر ممكن من الإعداد.
• كن متعدد الاستخدامات: اعمل بسلاسة في كل من سياقات React وغير React.
• حافظ على وزنك الخفيف: تجنب تضخيم حزمتك باستخدام أكواد غير ضرورية.
• البقاء مرنًا وقابلاً للتطوير: التكيف بسهولة مع احتياجات المشروع المختلفة مع الحفاظ على الأداء.

إذا سئمت الحلول الهندسية المفرطة وتريد شيئًا يعمل فقط، فقد تكون OSM هي الأداة "الرائعة" التي تحتاج إليها.

الميزات الرئيسية

• الحد الأدنى من الإعداد: يمكنك تحديد حالتك العالمية وإدارتها بسرعة باستخدام واجهة برمجة تطبيقات نظيفة وبديهية.
• توافق 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-ness في مشاريعك!

ابدأ مع OSM اليوم: npm: origami-state-manager