@rxx/worker
TypeScript icon, indicating that this package has built-in type declarations

1.0.1-alpha.4 • Public • Published

@react-mvi/core

react-mvi is Model-View-Intent based minimal framework with Reactjs and RxJS.

  • We remove all shouldComponentUpdate from React by create each props as RxJS.Observable.
  • We built more redux user friendly Model-View-Intent framework than cyclejs.
  • Asynchronous process is no more problem, StateHandler make it easy and clean.
  • Command line tool has been prepared! as @react-mvi/cli

Inspired by
cyclejs
redux
react-combinators
react-reactive-toolkit

First look !

import * as React from 'react';
import { Observable } from 'rxjs/Rx';
import { Tags as T, store, intent, connect } from '@react-mvi/core';

/**
 * Intent is converter that convert dispatched event to Observable.
 */
@intent
class Intent {
  plus() { return this.intent.for('counter::plus').share();}

  minus() { return this.intent.for('counter::minus').share(); }
}

/**
 * Store is Observable state factory.
 */
@store
class Store {
  initialize() {
    return {
      view: {
        counter: this.intent.plus().mapTo(1)
          .merge(this.intent.minus().mapTo(-1))
          .scan((acc, e) => {
            return acc + e;
          }, 0)
      }
    };
  }
}

/**
 * Root component must decorated by connect like redux.
 */
@connect({
  mapIntentToProps(intent) {
    return {
      onPlus: intent.callback('counter::plus'),
      onMinus: intent.callback('counter::minus'),
    }
  }
})
class View extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onPlus}>Plus</button>
        <button onClick={this.props.onMinus}>Minus</button>
        /* We can treat Observable value directly. */
        <T.Div>conter value is {this.props.counter}</T.Div>
      </div>
    );
  }
}

render(
  <Provider intent={Intent} store={Store}><View /></Provider>,
  document.querySelector('#app')
);

Guide

Architecture

architecture

Requirements

  • react >= 15.0.0 <= 15.6.1
  • react-dom >= 15.0.0 <= 15.6.1
  • rxjs >= 5.0.0 <= 5.4.2

Package Sidebar

Install

npm i @rxx/worker

Weekly Downloads

2

Version

1.0.1-alpha.4

License

MIT

Unpacked Size

441 kB

Total Files

112

Last publish

Collaborators

  • rxx