react-rxjs

A small library for creating applications based on unidirectional data flow with RxJS. Now with support for RxJS 6.

Install

npm i -S react-rxjs

Usage

// view.tsx
import * as React from 'react';

export type ViewProps = {
  number: number,
  inc: () => void,
  dec: () => void
};

const View = (props: ViewProps) => (
    <div>
      {props.number}
      <button onClick={props.inc}>+</button>
      <button onClick={props.dec}>-</button>
    </div>
);

export default View;

// store.ts
import { createStore } from 'react-rxjs';
import { merge, Subject, Observable } from "rxjs";
import { map } from "rxjs/operators";

const inc$ = new Subject<void>();
const dec$ = new Subject<void>();

const reducer$: Observable<(state: number) => number> = merge(
    inc$.pipe(map(() => (state: number) => state + 1)),
    dec$.pipe(map(() => (state: number) => state - 1))
);

const store$ = createStore("example", reducer$, 0);

export const inc = () => inc$.next();
export const dec = () => dec$.next();

export default store$;

// container.ts
import { inject } from 'react-rxjs';
import store$, { inc, dec } from './store';
import View, { ViewProps } from './view';

const props = (storeState: number): ViewProps => ({
    number: storeState,
    inc,
    dec
});

export default inject(store$, props)(View);

License

MIT

This project is a port and rewrite of the original code from MUSIT Norway