Create Observable React View

Make React View Observable

RR.observe

RR is like a manager to control all observable objects in your system. RR.observe is a React Mixin that helps you connect a view action to a observable object.

var React = require('react');
var RR = require('reactive-react');
var Rx = require('rx');

var View = React.createClass({
  mixins: [
    RR.observe(['viewLoaded$'])
  ],
  
  viewLoaded$: function() {
    return Rx.Observable.of({ id: 10 });
  },
  
  render: function() {
    return <span />;
  }
})

In the above example, when a View instance did mounted, it would send out a object.

RR.Observable.bind

Another way to connect view action to a RR observable object is using RR.Observable.bind method.

var React = require('react');
var RR = require('reactive-react');
var Rx = require('rx');

var View = React.classClass({
  
  handleClick: RR.Observable.bind('viewClick$', function(observable, _this) {
    return observable.map(function(evt) {
        return { text: evt.target.innerText };
    });
  }),
  
  render: function() {
    return <a onClick={ this.handleClick }>Click Me !!</a>
  }  
});

In this case, when I click the link, the view would send out a object, so that the actions could subscribe.

Subscribe from Stores

In Flux Architecture, the data for View is from Store object, and in a Reactive Architecture, View should listen to the data change in Store.

RR helps you to connect View and Store by using RR.subscribe mixin.

var React = require('react');
var RR = require('reactive-react');
var Rx = require('rx');

var Store = RR.Observable.createStore(
  ViewAction, ['someActionDoneSuccess$'],
  function(doneSuccess$) {
    return doneSuccess$.map(function(data) {
      return { data$: data.thePropertyIWant };
    })
  }
);

var View = React.createClass(function() {

  mixins: [RR.observe(Store, { data$: 'dataChange' })],

  dataChange: function(data) {
    this.setState(data);
  },

  getInitialState: function() {
    return { thePropertyIWant: 0 };
  },

  render: function() {
    return <span>{ this.state.thePropertyIWant }</span>;
  }

});