rx-effects-react
v1.1.2
Published
Reactive state and effects management. Tooling for React.js
Downloads
3,305
Maintainers
Readme
RxEffects: rx-effects-react
Reactive state and effect management with RxJS. Tooling for React.js.
Documentation
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 bysource$
observable.useObserver
– subscribes the provided observer ornext
handler onsource$
observable.useSelector
– returns a value provided bysource$
observable.useQuery
– returns a value which is provided by the query.
Example:
// 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;
};
© 2021 Mikhail Nasyrov, MIT license