urx by example
Before diving deeper, let's accomplish a small victory with a simple, end-to-end practical walkthrough. In this section, we will build an urx-based React component that sums two numbers and displays the result.
#Build a Stream System
Let's start by translating the requirements to a stream system.
In this case, the system consist of two input streams (
b), and one output stream -
For the initial version,
b can start with default values of
sumSystem is the implementation of our sum logic - it constructs the necessary input and
output streams and wires up the relationships between them using the
combineLatest transformers and the
We also converted the resulting
aPlusB emitter into a stateful stream, so that it always emits a value.
#Testing a System
Let's poke the resulting system to get a feeling of how it works. We will import
In a production project, this should be part of our unit test suite.
The above snippet will call the subscription (
console.log) three times - with
#System to React Component
Next, we will expose our system as a React component. As a twist,
our component will accept the
a as a component property, while
b is going to come from an user input,
from an UI rendered by a child component.
#Putting it all Together
The final step is to render the resulting components. To demonstrate how the SumComponent handles the change of the
we will wire it up to an
And, that's it! below, you can find the complete source - open it in CodeSandbox and tweak some of it for more interactive learning.