مقدمة

قد يكون إنشاء تطبيقات ويب كبيرة أمرًا صعبًا، خاصة عندما يكون لديك الكثير من المعلومات المختلفة التي يجب عليك تتبعها. لكن لا تقلق، RxJS هنا لمساعدتك! إنها بمثابة أداة رائعة حقًا تساعدك على إدارة جميع بياناتك في مكان واحد.

باستخدام RxJS، يمكنك إنشاء هذه الأشياء التي تسمى "تدفقات البيانات" التي يمكن لأجزاء مختلفة من تطبيقك استخدامها. إنه مثل نهر كبير يتدفق عبر تطبيقك، مما يجعل كل شيء متصلاً ومتزامنًا.

في هذه المقالة، سنوضح لك كيفية استخدام RxJS لإنشاء تطبيقات ويب يسهل إدارتها وتعمل بشكل رائع. بنهاية المقالة، ستعرف كيفية استخدام RxJS لإدارة جميع بياناتك وإنشاء تطبيقات ويب أكبر وأفضل!

لماذا RxJS لإدارة الدولة؟

مرحبًا، هل شعرت بالارتباك عندما تقوم بإنشاء تطبيق ويب كبير ولديك الكثير من المعلومات المختلفة التي يجب تتبعها؟ هذا هو المكان الذي يأتي فيه RxJS! إنها بمثابة مكتبة رائعة حقًا تساعدك على إدارة جميع بياناتك في مكان واحد.

باستخدام RxJS، يمكنك إنشاء تدفقات من البيانات التي يمكن لأجزاء مختلفة من تطبيقك استخدامها. إنه يشبه النهر الذي يتدفق عبر تطبيقك، مما يجعل كل شيء متصلاً ومتزامنًا.

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

بشكل عام، تعد RxJS أداة رائعة لإدارة البيانات في تطبيقات الويب الكبيرة. سواء كنت تنشئ تطبيقًا بسيطًا أو تطبيقًا كبيرًا، يمكن أن يساعدك RxJS في إبقاء كل شيء تحت السيطرة!

مثال على قائمة المهام

أسهل طريقة لتطبيق تقنية جديدة أو إثبات جديد للمفهوم هي إنشاء قائمة مهام.

المتجر:

const subject = new Subject();

const initialState: Task[] = [];

let state = initialState;

export const todoStore = {
  init: () => {
    subject.next(state);
  },
  subscribe: (setState: any) => {
    subject.subscribe(setState);
  },
  addTask: (content: string) => {
    const task = {
      content,
      id: uid(),
      isDone: false,
    };
    state = [...state, task];
    subject.next(state);
  },
  removeTask: (id: string) => {
    const tasks = state.filter((task) => task.id !== id);
    state = tasks;
    subject.next(state);
  },
  completeTask: (id: string) => {
    const tasks = state.map((task) => {
      if (task.id === id) {
        task.isDone = !task.isDone;
      }
      return task;
    });
    state = tasks;
    subject.next(state);
  },
  initialState,
};

يحدد هذا الرمز متجرًا بسيطًا لإدارة قائمة المهام باستخدام RxJS. يتم تنفيذ المتجر باستخدام موضوع ويوفر طرقًا لإضافة المهام وإزالتها وإكمالها.

تقوم وظيفة init بتهيئة المتجر عن طريق نشر الحالة الحالية للموضوع باستخدام subject.next(state). يتم استدعاء هذه الوظيفة عادةً عند تحميل التطبيق لأول مرة للتأكد من تحديث المتجر.

تتيح وظيفة الاشتراك للمكونات الاشتراك في التغييرات في المتجر. عندما يتم تحديث المتجر، سيتم استدعاء وظيفة setState التي تم تمريرها للاشتراك بالحالة المحدثة. تُستخدم هذه الوظيفة عادةً بواسطة المكونات التي تحتاج إلى عرض الحالة الحالية للمتجر.

بشكل عام، تعد التهيئة والاشتراك وظيفتين مهمتين في هذا الكود والتي تمكن المطورين من إدارة حالة قائمة المهام باستخدام RxJS.

الاستخدام:

من السهل جدًا تنفيذ هذا النوع من إدارة الحالة، فقط قم بذلك على أعلى مستوى:

const [tasks, setTasks] = useState([]);

  useEffect(() => {
    todoStore.subscribe(setTasks);
    todoStore.init();
  });

يستخدم هذا الرمز خطافات React للاشتراك في متجر يدير قائمة المهام وتهيئته باستخدام RxJS.

يقوم الخطاف useState بإنشاء متغير حالة يسمى المهام ووظيفة تسمى setTasks لتحديث تلك الحالة. تقوم الوسيطة [] التي تم تمريرها إلى useState بتعيين القيمة الأولية للمهام إلى مصفوفة فارغة.

يتم استخدام خطاف useEffect للاشتراك في متجر المهام وتهيئته. يشترك سطر todoStore.subscribe(setTasks) في وظيفة setTasks للتغييرات في المتجر. وهذا يعني أنه كلما تم تحديث المتجر، سيتم استدعاء setTasks بالحالة المحدثة، وسيتم تحديث المهام وفقًا لذلك.

تقوم الدالة todoStore.init() بتهيئة المتجر عن طريق نشر الحالة الحالية للموضوع باستخدام subject.next(state).

خاتمة

إذن هذا كل شيء! لقد تعلمنا كيفية استخدام RxJS وReact لإنشاء تطبيق قائمة المهام. استخدمنا RxJS لإدارة حالة التطبيق وReact لعرض الحالة الحالية للمستخدم.

لقد رأينا كيف يوفر RxJS مجموعة قوية من الأدوات لإدارة الحالة، بما في ذلك العناصر القابلة للملاحظة والمشغلين والموضوعات. وتعلمنا أيضًا كيفية استخدام خطافات React مثل useState وuseEffect لتحديث حالة التطبيق في الوقت الفعلي.

باستخدام RxJS وReact معًا، قمنا ببناء تطبيق رائع يسهل استخدامه وصيانته. ولقد تعلمنا بعض المهارات القيمة حقًا التي يمكننا استخدامها لإنشاء تطبيقات ويب أكثر روعة في المستقبل!

إذا كنت تعتقد أن المقالة غامضة للغاية، فراجع ما يلي:

• كود المصدر: https://github.com/starneit/rxjs-state-poc
• العرض التوضيحي: https://rxjs-poc.web.app/