RxJS dipermudahkan dengan Reactables

pengenalan

RxJS ialah perpustakaan yang berkuasa tetapi ia telah diketahui mempunyai keluk pembelajaran yang curam.

Permukaan API perpustakaan yang besar, ditambah pula dengan anjakan paradigma kepada pengaturcaraan reaktif boleh menggembirakan bagi pendatang baharu.

Saya mencipta Reactables API untuk memudahkan penggunaan RxJS dan memudahkan pengenalan pembangun kepada pengaturcaraan reaktif.

Contoh

Kami akan membina kawalan mudah yang menogol tetapan pemberitahuan pengguna.

Ia juga akan menghantar tetapan togol yang dikemas kini ke hujung belakang olok-olok dan kemudian memancarkan mesej kejayaan untuk pengguna.

Pasang RxJS & Reactables

npm i rxjs @reactables/core

Bermula dengan togol asas.

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<ToggleState, ToggleActions> =>
  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 mencipta Reactable, iaitu tuple dengan dua item.

1. RxJS Observable UI boleh melanggan untuk perubahan keadaan.

2. Kaedah objek tindakan yang boleh dipanggil oleh UI untuk menggunakan perubahan keadaan.

Tidak perlu Subjek apabila menggunakan Reactables.

Kita hanya boleh menerangkan tingkah laku yang kita inginkan dengan fungsi pengurangan tulen.

Reactables menggunakan Subjek dan pelbagai operator di bawah hud untuk mengurus keadaan bagi pembangun.

Menambahkan panggilan API dan mesej kejayaan berkelip

Reactables mengendalikan operasi tak segerak dengan kesan yang dinyatakan sebagai Fungsi Operator RxJS. Ia boleh diisytiharkan dengan tindakan/pengurangan yang mencetuskan kesan.

Ini membolehkan kami memanfaatkan RxJS sepenuhnya dalam mengendalikan logik tak segerak kami.

Mari ubah suai contoh togol kami di atas untuk memasukkan beberapa kelakuan tak segerak. Kami akan melupakan pengendalian ralat untuk memastikan ia pendek.

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<ToggleState, ToggleActions> =>
  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,
      }),
    },
  });

Lihat contoh penuh di StackBlitz untuk:
Bertindak balas | Bersudut

Mari ikat Reactable kami pada paparan. Di bawah ialah contoh pengikatan pada komponen React dengan cangkuk useReactable daripada pakej @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 (
    <div className="notification-settings">
      {showSuccessMessage && (
        <div className="success-message">
          Success! Notifications are {notificationsOn ? 'on' : 'off'}.
        </div>
      )}
      <p>Notifications Setting:</p>
      <button onClick={() => toggle(!notificationsOn)}>
        {notificationsOn ? 'On' : 'Off'}
      </button>
    </div>
  );
}

export default App;

Itu sahaja!

Kesimpulan

Reactables membantu memudahkan RxJS dengan membenarkan kami membina fungsi kami dengan fungsi pengurangan tulen berbanding menyelam ke dalam dunia Subjek.

RxJS kemudiannya dikhaskan untuk melakukan yang terbaik - mengarang logik tak segerak kami.

Reactables boleh melanjutkan dan melakukan lebih banyak lagi! Lihat dokumentasi untuk lebih banyak contoh, termasuk cara ia boleh digunakan untuk mengurus borang!

Atas ialah kandungan terperinci RxJS dipermudahkan dengan Reactables. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!