Wondering what’s next for npm?Check out our public roadmap! »

    react-rxjs-lib
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.7 • Public • Published

    react-rxjs

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

    NPM

    Install

    npm i -S react-rxjs

    Usage

    // view.tsx
    import * as React from 'react';
     
    export type ViewProps = {
      numbernumber,
      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

    Install

    npm i react-rxjs-lib

    DownloadsWeekly Downloads

    0

    Version

    2.0.7

    License

    ISC

    Unpacked Size

    7.03 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar