Skip to content

Latest commit

 

History

History
118 lines (96 loc) · 2.74 KB

README.md

File metadata and controls

118 lines (96 loc) · 2.74 KB
Raw

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

Architecture

architecture

Requirements

  • react >= 16.6.0
  • react-dom >= 16.6.0
  • rxjs >= 6.0.0 <= 6.3.3

Modules