RxEffects: rx-effects-react

Reactive state and effect management with RxJS. Tooling for React.js.

Documentation

• Main docs
• API docs

Installation

npm install rx-effects rx-effects-react --save

Usage

The package provides utility hooks to bind the core RxEffects to React components and hooks:

• useConst – keeps the value as a constant between renders.
• useController – creates an ad-hoc controller by the factory and destroys it on unmounting.
• useObservable – returns a value provided by source$ observable.
• useObserver – subscribes the provided observer or next handler on source$ observable.
• useSelector – returns a value provided by source$ observable.
• useStateQuery – returns a value which is provided by the query.

Example:

// pizzaShopComponent.tsx

import React, { FC, useEffect } from 'react';
import { useConst, useObservable, useStateQuery } from 'rx-effects-react';
import { createPizzaShopController } from './pizzaShop';

export const PizzaShopComponent: FC = () => {
  // Creates the controller and destroy it on unmounting the component
  const controller = useConst(() => createPizzaShopController());
  useEffect(() => controller.destroy, [controller]);

  // The same creation can be achieved by using `useController()` helper:
  // const controller = useController(createPizzaShopController);

  // Using the controller
  const { ordersQuery, addPizza, removePizza, submitCart, submitState } =
    controller;

  // Subscribing to state data and the effect stata
  const orders = useStateQuery(ordersQuery);
  const isPending = useStateQuery(submitState.pending);
  const submitError = useObservable(submitState.error$, undefined);

  // Actual rendering should be here.
  return null;
};

---

© 2021 Mikhail Nasyrov, MIT license