مقدمة

RxJS هي مكتبة قوية ولكن من المعروف أنها تتمتع بمنحنى تعليمي حاد.

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

لقد قمت بإنشاء Reactables API لتبسيط استخدام RxJS وتسهيل تعريف المطور بالبرمجة التفاعلية.

مثال

سنقوم بإنشاء عنصر تحكم بسيط يقوم بتبديل إعداد إشعارات المستخدم.

سيتم أيضًا إرسال إعداد التبديل المحدث إلى واجهة خلفية وهمية ثم إرسال رسالة نجاح للمستخدم.

قم بتثبيت RxJS وReactables

npm i rxjs @reactables/core

البدء بالتبديل الأساسي.

import { RxBuilder, Reactable } from '@reactables/core';

export type ToggleState = {
  notificationsOn: boolean;
};

export type ToggleActions = {
  toggle: (payload: boolean) => void;
};

export const RxNotificationsToggle = (
  initialState = {
    notificationsOn: false,
  } as ToggleState
): Reactable =>
  RxBuilder({
    initialState,
    reducers: {
      toggle: (state) => ({
        notificationsOn: !state.notificationsOn,
      }),
    },
  });


const [state$, actions] = RxToggleNotifications();

state$.subscribe((state) => {
  console.log(state.notificationsOn);
});

actions.toggle();

/*
OUTPUT

false
true

*/

يقوم RxBuilder بإنشاء Reactable، وهو عبارة عن صف يحتوي على عنصرين.

1. يمكن لـ RxJS Observable أن تشترك واجهة المستخدم فيه لتغييرات الحالة.

2. كائن من أساليب الإجراء التي يمكن لواجهة المستخدم الاتصال بها لاستدعاء تغييرات الحالة.

لا حاجة للموضوعات عند استخدام Reactables.

يمكننا فقط وصف السلوك الذي نريده باستخدام وظائف المخفض النقية.

تستخدم Reactables الموضوعات وعوامل التشغيل المختلفة ضمن الغطاء لإدارة الحالة للمطور.

إضافة استدعاء API ورسالة النجاح الوامضة

تتعامل العناصر التفاعلية مع العمليات غير المتزامنة مع التأثيرات التي يتم التعبير عنها كوظائف مشغل RxJS. يمكن الإعلان عنها بالإجراء/المخفض الذي يؤدي إلى التأثير (التأثيرات).

يسمح لنا هذا بالاستفادة من RxJS إلى أقصى حد في التعامل مع منطقنا غير المتزامن.

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

import { RxBuilder, Reactable } from '@reactables/core';
import { of, concat } from 'rxjs';
import { debounceTime, switchMap, mergeMap, delay } from 'rxjs/operators';

export type ToggleState = {
  notificationsOn: boolean;
  showSuccessMessage: boolean;
};
export type ToggleActions = {
  toggle: (payload: boolean) => void;
};

export const RxNotificationsToggle = (
  initialState = {
    notificationsOn: false,
    showSuccessMessage: false,
  }
): Reactable =>
  RxBuilder({
    initialState,
    reducers: {
      toggle: {
        reducer: (_, action) => ({
          notificationsOn: action.payload as boolean,
          showSuccessMessage: false,
        }),
        effects: [
          (toggleActions$) =>
            toggleActions$.pipe(
              debounceTime(500),
              // switchMap to unsubscribe from previous API calls if a new toggle occurs
              switchMap(({ payload: notificationsOn }) =>
                of(notificationsOn)
                  .pipe(delay(500)) // Mock API call
                  .pipe(
                    mergeMap(() =>
                      concat(
                        // Flashing the success message for 2 seconds
                        of({ type: 'updateSuccess' }),
                        of({ type: 'hideSuccessMessage' }).pipe(delay(2000))
                      )
                    )
                  )
              )
            ),
        ],
      },
      updateSuccess: (state) => ({
        ...state,
        showSuccessMessage: true,
      }),
      hideSuccessMessage: (state) => ({
        ...state,
        showSuccessMessage: false,
      }),
    },
  });

انظر المثال الكامل على StackBlitz لـ:
رد | الزاوي

دعونا نربط Reactable بالعرض. فيما يلي مثال على الربط بمكون React باستخدام خطاف useReactable من حزمة @reactables/react.

import { RxNotificationsToggle } from './RxNotificationsToggle';
import { useReactable } from '@reactables/react';

function App() {
  const [state, actions] = useReactable(RxNotificationsToggle);
  if (!state) return;

  const { notificationsOn, showSuccessMessage } = state;
  const { toggle } = actions;

  return (
    

      {showSuccessMessage && (
        

          Success! Notifications are {notificationsOn ? 'on' : 'off'}.
        
      )}
      
Notifications Setting:
       toggle(!notificationsOn)}>
        {notificationsOn ? 'On' : 'Off'}
      
    
  );
}

export default App;

هذا كل شيء!

خاتمة

تساعد Reactables على تبسيط RxJS من خلال السماح لنا ببناء وظائفنا باستخدام وظائف المخفض النقية مقابل الغوص في عالم الموضوعات.

يتم تخصيص RxJS بعد ذلك لما هو أفضل - وهو إنشاء منطقنا غير المتزامن.

يمكن للتفاعلات أن تتوسع وتفعل أكثر من ذلك بكثير! راجع الوثائق لمزيد من الأمثلة، بما في ذلك كيفية استخدامها في إدارة النماذج!