Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

README.md

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)

About

Reactive React application flow with React, RxJS and Redux

Resources

Releases

No releases published
You can’t perform that action at this time.