使用 Reactables 简化 RxJS

npm i rxjs @reactables/core

import { rxbuilder, reactable } from '@reactables/core';export type togglestate = {  notificationson: boolean;};export type toggleactions = {  toggle: (payload: boolean) =&gt; void;};export const rxnotificationstoggle = (  initialstate = {    notificationson: false,  } as togglestate): reactable<togglestate toggleactions> =&gt;  rxbuilder({    initialstate,    reducers: {      toggle: (state) =&gt; ({        notificationson: !state.notificationson,      }),    },  });const [state$, actions] = rxtogglenotifications();state$.subscribe((state) =&gt; {  console.log(state.notificationson);});actions.toggle();/*outputfalsetrue*/</togglestate>

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) =&gt; void;};export const rxnotificationstoggle = (  initialstate = {    notificationson: false,    showsuccessmessage: false,  }): reactable<togglestate toggleactions> =&gt;  rxbuilder({    initialstate,    reducers: {      toggle: {        reducer: (_, action) =&gt; ({          notificationson: action.payload as boolean,          showsuccessmessage: false,        }),        effects: [          (toggleactions$) =&gt;            toggleactions$.pipe(              debouncetime(500),              // switchmap to unsubscribe from previous api calls if a new toggle occurs              switchmap(({ payload: notificationson }) =&gt;                of(notificationson)                  .pipe(delay(500)) // mock api call                  .pipe(                    mergemap(() =&gt;                      concat(                        // flashing the success message for 2 seconds                        of({ type: 'updatesuccess' }),                        of({ type: 'hidesuccessmessage' }).pipe(delay(2000))                      )                    )                  )              )            ),        ],      },      updatesuccess: (state) =&gt; ({        ...state,        showsuccessmessage: true,      }),      hidesuccessmessage: (state) =&gt; ({        ...state,        showsuccessmessage: false,      }),    },  });</togglestate>

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 &amp;&amp; (        <div classname="success-message">          Success! Notifications are {notificationsOn ? 'on' : 'off'}.        </div>      )}      <p>Notifications Setting:</p>      <button onclick="{()"> toggle(!notificationsOn)}&gt;        {notificationsOn ? 'On' : 'Off'}      </button>    </div>  );}export default App;