@jhoguet/react-rxjs

:exclamation: Use with caution, this is still in the proof of concept phase and lacks adequate testing both in automated tests and in the wild.

Getting Started

npm install @jhoguet/react-rxjs

Simple Example

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { IOCContainer, DependencyInjectableStreamComponent } from '@jhoguet/react-rxjs';
import { BehaviorSubject } from 'rxjs';
import 'aurelia-polyfills';

class HappinessViewModel{
    constructor(){
        this.happiness$ = new BehaviorSubject(1);
        this.increment = () => this.happiness$.next(this.happiness$.value + 1);
    }
}

class AppView extends Component {
    render(){
        const props = this.props;
        return (
            <div>
                <h1>Happiness {props.happiness}</h1>
                <button onClick={e => props.increment()}>Happier!</button>
            </div>
        );
    }
}

class App extends DependencyInjectableStreamComponent {
    static inject(){
        return {
            happiness : HappinessViewModel
        };
    }
    getRenderStream(){
        return this.happiness.happiness$.map(happiness => {
            return {
                happiness,
                increment : () => this.happiness.increment()
            };
        })
        .map(props => {
            return <AppView {...props} />
        });
    }
}

const el = document.createElement('div');
ReactDOM.render(
    <IOCContainer>
        <App />
    </IOCContainer>
    , el
);
document.body.appendChild(el);

So much to cover... submit an issue to encourage me to pump out the api docs...

Intent

The intent of this is to provide a means of building a complex application leveraging the strenths of IOC, React, and RxJS Streams. You should be able easily use any react components.

You should be able to use the same tools (rxjs and IOC) to manage the state / logic of both a "Smart" component like a dropdown (eg open state) as you do complex components (like your entire application.

You should be able to easily have multiple independent instances of any component, something that is not trivial in a system leveraging global stores.

Assumptions / Constraints

• this is using aurelia-dependency-injection which is a great IOC container, but is rather large (mostly because of corejs and forces you to use classes. Ideally an IOC container in Javascript would also support functions... in effect currying dependencies.
• DependencyInjectableStreamComponent has to wrap the component in order for the react-debugger to see the component... dig in to this to better understand options and expose the best abstraction for consumers?
• IOC isn't strictly necessary in this repo... consider splitting out the IOC part from the Stream part?
• add an IOC opt-out option which uses a container to build everything without the consumer knowing there was ever a container?

Similar Projects

• http://cycle.js.org/ ands its sister https://github.com/pH200/cycle-react

Next Steps / How to help

• automated tests in a browser (real dom)
• docs...
• research IOC solutions
• research state of decorators... time to bring in @inject()?