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][rx-effects/docs]
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.
- useQuery – returns a value which is provided by the query.

Example:

`tsx
// pizzaShopComponent.tsx

import React, { FC, useEffect } from 'react';
import { useConst, useObservable, useQuery } 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 = useQuery(ordersQuery);
const isPending = useQuery(submitState.pending);
const submitError = useObservable(submitState.error$, undefined);

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

---

[rx-effects/docs]: https://github.com/mnasyrov/rx-effects/blob/main/packages/rx-effects/README.md

© 2021 Mikhail Nasyrov, MIT license