https://github.com/jarlah/react-rxjs-flux

a small library for creating applications based on unidirectional data flow
https://github.com/jarlah/react-rxjs-flux

flux-architecture kiss react rxjs separation-of-concerns

Last synced: 6 months ago
JSON representation

a small library for creating applications based on unidirectional data flow

• Host: GitHub
• URL: https://github.com/jarlah/react-rxjs-flux
• Owner: jarlah
• License: mit
• Created: 2017-09-16T18:18:04.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T21:36:42.000Z (almost 3 years ago)
• Last Synced: 2024-04-26T16:04:30.265Z (over 1 year ago)
• Topics: flux-architecture, kiss, react, rxjs, separation-of-concerns
• Language: TypeScript
• Homepage:
• Size: 903 KB
• Stars: 22
• Watchers: 3
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-rxjs-flux

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

[![NPM](https://nodei.co/npm/react-rxjs-flux.png?compact=true)](https://npmjs.org/package/react-rxjs-flux)

## Install

```bash

yarn add react-rxjs-flux

```

## Usage

```typescript

// view.tsx

export type ViewProps = {

  number: number,

  inc: () => void,

  dec: () => void

};

const View = (props: ViewProps) => (

    


      {props.number}

      +

      -

    

);


export default View;

```

```typescript

// store.ts

import { createStore } from 'react-rxjs';

import { merge, Subject, Observable } from "rxjs";

import { map } from "rxjs/operators";

export const inc$ = new Subject();

export const dec$ = new Subject();

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 default store$;

```

```typescript

// container.ts

import { connect } from 'react-rxjs';

import store$, { inc$, dec$ } from './store';

import View, { ViewProps } from './view';

const mapStateToProps = (storeState: number): ViewProps => ({

    number: storeState,

    inc: () => inc$.next(),

    dec: () => dec$.next(),

});

export default connect(store$, mapStateToProps)(View);

```

## License

[MIT](http://vjpr.mit-license.org)