rx-recompose
DEPRECATED
This package has been merged into the main Recompose project.
RxJS utilities for Recompose.
npm install --save rx-recompose
It turns out that much of the React Component API can be expressed in terms of observables:
- Instead of
setState()
, combine multiple streams together. - Instead of
getInitialState()
, usestartWith()
orconcat()
. - Instead of
shouldComponentUpdate()
, usedistinctUntilChanged()
,debounce()
, etc.
Other benefits include:
- No distinction between state and props – everything is an stream.
- No need to worry about unsubscribing from event listeners. Subscriptions are handled for you.
- Sideways data loading is trivial – just combine the props stream with an external stream.
- Access to the full ecosystem of RxJS libraries.
API
createComponent()
: ReactComponent
Creates a React component by mapping an observable stream of props to a stream of React nodes (vdom).
You can think of propsToReactNode
as a function f
such that
const vdom$ =
where props$
is a stream of props and vdom$
is a stream of React nodes. This formulation similar to the popular notion of React views as a function, often communicated as
v = f(d)
See below for a full example.
mapPropsStream()
: ReactComponent
A higher-order component version of createComponent()
— accepts a function that maps an observable stream of owner props to a stream of child props, rather than directly to a stream of React nodes. The child props are then passed to a base component.
You may want to use this version to interoperate with other Recompose higher-order component helpers.
const enhance = const Timer =
createEventHandler()
createEventHandler<T>: void stream: Observable<T>
Returns an object with properties handler
and stream
. stream
is an observable sequence, and handler
is a function that pushes new values onto the sequence. (This is akin to mailboxes in Elm.) Useful for creating event handlers like onClick
.
Example
const Counter =