drrx
v0.0.1-alpha.3
Published
[![NPM version](https://img.shields.io/npm/v/drrx.svg?style=flat)](https://npmjs.org/package/drrx) [![Build Status](https://img.shields.io/travis/Jetsly/drrx.svg?style=flat)](https://travis-ci.org/Jetsly/drrx) [![NPM downloads](http://img.shields.io/npm/d
Downloads
4
Maintainers
Readme
drrx
A lightweight front-end framework based on redux, redux-observable
Install
$ npm install --save drrx
Usage Example
App.tsx
import * as React from 'react';
import { dispatch, mapField } from 'drrx';
export default class App extends React.Component {
@mapField('global', ['count', 'isAuth', 'name'])
private store: { count: number; isAuth: boolean; name: string };
render() {
console.log(this.store, 'App');
return (
<div>
<p>{this.store.isAuth} isAuth</p>
<p>{this.store.name} name</p>
<button onClick={() => dispatch({ type: 'aa/increment' })}>increment</button>
<button onClick={() => dispatch({ type: 'aa/decrement' })}>decrement</button>
<button onClick={() => dispatch({ type: 'aa/ping', payload: { a: 'c' } })}>ping</button>
</div>
);
}
}
global.ts
import { concat } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
export default {
namespace: 'global',
state: {
count: 33,
isAuth: false,
name: 'ddot',
},
reducers: {
increment(state, { payload }) {
state.count += 1;
},
decrement(state, { payload }) {
state.count -= 1;
},
reset(state) {
state.count = 0;
},
},
epics: {
ping: (action, { of }) => {
return action.pipe(
map(a => {
of({ type: 'aa/rest' });
return Promise.resolve('1');
})
);
},
},
};
index.tsx
import * as React from 'react';
import create from 'drrx';
import App from './App';
import appModel from './models/app';
var app = create();
app.model(appModel);
app.router(({ app }) => <App />);
app.start('#root');
LICENSE
MIT