@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

• Examples
  • Simple Counter Programe
  • Single Page Application with react-router
• Basics
  • Setup
  • Create connected component
  • Create component with context
  • Create store
  • Create intent
  • StaeHandler
• Advanced Usage
  • Create your own StateHandler

Architecture

Requirements

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