thisless React

Reactive React application flow, with React, RxJS and Redux.

It is all about...

• thisless: this cannot be found in examples!

• Fully Reactive: With RxJS and React Reactive Class, components are made reactive and observable.

• It's just React: No magic! Use the technique you already know, without learning new library or API and plays well with your existing React apps.

• Pure View: Completely decouple View from Model, no more Model injection. Code like store.dispatch(action) or store.getState() cannot be found in View.

• High Performance: Introduce Static Component and Data Binding by default. React will no longer diff entire huge Virtual DOM. See Vjeux's slide Animated — React Performance Toolbox for more details.

Getting started

The building blocks are functions that returning element node and event streams.

function button(props) {
  const clickEv$ = new Rx.Subject();
  const element = (
    <button onClick={clickEv$.onNext.bind(clickEv$)}>
      {props.text}
    </button>
  );

  return {
    element,
    events: {
      clickEv$
    }
  }
}

Compose these functions and eventually you will get a function with root element node and event streams of the app.

const store = configureStore();
const { state$ } = store;

const {
  element: App,
  events
} = app(state$);

ReactDOM.render(App, mountNode);

And then write code to handle these event streams, like dealing with store or interacting with the browser.

function handleEvent(store, events) {
  events.clickIncreaseButton$.subscribe(() => {
    store.dispatch(/* ... */);
  });
}

handleEvent(store, events);

That's it!

See examples for complete app code.

Tip about Redux middleware

There is no restrictions on how to use Redux in your thisless React app, but I highly recommend using RxJS streams to replace middleware, they handles async operations well and in this way your application flow will become more clear and straightforward (and you write less code!).

Feedbacks are welcome!

Feel free to discuss via opening issues or send pull requests!

Inspirations

Cycle.js: I borrowed lots of concepts from it.

Angular: Don't create components all the time, element + function is good enough to get the job done.

License

The MIT License (MIT)