Skip to content

jas-chen/thisless-react

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published