Connect your signal graphs to ReactJs Components!
In your project:
npm install @rxreact/signal-connect --save
yarn add @rxreact/signal-connect
RxJS and React are peer dependencies and need to be installed seperately
Define a signal graph using the @rxreact/signal library.
Here's lets use the example from that project's README of a Signal Graph to represent a login component and user authentication.
.defineaddPrimary'username$'.defineaddPrimary'password$',addPrimary'submitButton$',addDependency'api', api,addDerived'loginAttempts$', makeLoginAttempts, 'submitButton$', 'username$', 'password$',addDerived'loginResponses$', makeLoginResponses, 'loginAttempts$', 'api',addDerived'loginInProgress$', makeLoginInProgress, 'loginAttempts$', 'loginResponses$',addDerived'loginSuccesses$', makeLoginSuccesses, 'loginResponses$',addDerived'loginFailures$', makeLoginFailures, 'loginResponses$',addDerived'loginFailureMessage$',makeLoginFailureMessage,'loginAttempts$','loginFailures$',addDerived'authStatus$', makeAuthStatus, 'loginSuccesses$'.initializeWith.build
Now, let's say we have a login form component:
We want to connect the signals from our signal graph to props on this component. Here's where we use
@rxreact/signal-connect exports a single function called
connect behaves a lot like
react-redux, creating data props that get updated from the latest values in the graph, and functions as props that we can call to send data back to the graph. The simples use of
connect looks like this:
The first object specifies data props that get updated as signals from the graph emit new values. (think
mapStateToProps) The second objects specifies primary signals we use as entry points to send data back into the graph. In this case, the login form gets
submitButton as props. Each prop is a function, and when it's called (taking a signal parameter) it gets sent into the primary signals in the graph! (think
More Complex Usage
You may later want to have more control over assembling your props. In this case, you can can actually pass functions instead of objects, which get a single parameter than can be used to extract signals from the graph.
You also have access to an observable that represents the external props passed to the component in these functions:
However, ideally you can use the simple version of
connect in most cases, because signal graphs are flexible, and you can create many of your custom pieces/selections of data inside the graph itself!
These libraries are still in development, use at your own risk