brn / rxx

Minimal framework for react + rxjs mvi architecture

rxx

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

• 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 @rxx/cli

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

First look !

import React from 'react';
import { Observable } from 'rxjs';
import { connect, reducer } from '@rxx/core';

function stream(source, initialState) {
  return {
    view: reducer(
      source,
      (states, payload) => {
        switch (payload.type) {
          case 'COUNTER::PLUS':
            return { ...states, count: states.count + 1 };
          case 'COUNTER::MINUS':
            return { ...states, count: states.count - 1 };
          default:
            return states;
        }
      },
      initialState
    )
  }
}

/**
 * Root component must decorated by connect like redux.
 */
@connect({
  mapIntentToProps(intent) {
    return {
      onPlus: intent.callback('COUNTER::PLUS'),
      onMinus: intent.callback('COUNTER::MINUS'),
    }
  },
  mapStateToProps(state) {
    return {
      value: state.counter.count
    }
  }
})
class View extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onPlus}>Plus</button>
        <button onClick={this.props.onMinus}>Minus</button>
        <div>conter value is {this.props.value}</div>
      </div>
    );
  }
}

const view = makeView(<View/>);
const app = makeApp({counter: stream});
const Component = app(view({counter: {count: 0}}));

render(
  <Component />
  document.querySelector('#app')
);

Installation and setup

npm install @rxx/core

Guide

• Examples
  • Simple Counter Program
  • 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 >= 16.6.0
• react-dom >= 16.6.0
• rxjs >= 6.0.0 <= 6.3.3

Modules

• @rxx/core
• @rxx/http
• @rxx/testing
• @rxx/cli