flumpt
v0.3.1
Published
Conceptual Implementation of EventEmitter based Flux.
Downloads
35
Readme
Flumpt
Conceptual Implementation of EventEmitter based Flux.
Concepts
Flux is (...What you think) but all you need is just an EventEmitter
.
Interface is inpired by Om
.
Example
Hello World
import * as React from "react";
import {Flux, Component} from "flumpt";
import {render} from "react-dom";
class MyComponent extends Component {
componentDidMount() {
this.dispatch("increment");
}
render() {
return (
<div>
{this.props.count}
<button onClick={() => this.dispatch("increment")}>increment</button>
</div>
);
}
}
class App extends Flux {
subscribe() { // `subscribe` is called once in constructor
this.on("increment", () => {
this.update(({count}) => {
return {count: count + 1}; // return next state
});
});
}
render(state) {
return <MyComponent {...state}/>;
}
}
// Setup renderer
const app = new App({
renderer: el => {
render(el, document.querySelector("#root"));
},
initialState: {count: 0},
middlewares: [
// logger
// it may get state before unwrap promise
(state) => {
console.log(state);
return state
}
]
});
app.on(":start-async-updating", () => {
// overlay ui lock
});
app.on(":end-anync-updating", () => {
// hide ui lock
});
app.update(_initialState => ({count: 1})) // it fires rendering
Flux
isEventEmitter
Component
is justReactComponent
withdispatch
method.
With decorator
Added by v0.3.0. Need babel-plugin-transform-decorators-legacy.
import React from 'react'
import {withFlux, dispatchable} from 'flumpt'
@dispatchable
class CounterIncrement extends React.Component {
render() {
return <button onClick={_ev => this.context.dispatch('increment')}>+1</button>
}
}
@withFlux((update, on) => {
on('increment', () => {
update(state => {
return {count: state.count + 1}
})
})
}, {count: 0})
class MyApp extends React.Component {
render () {
return <div>
<span>{this.props.count}</span>
<CounterIncrement/>
</div>
}
}
With TypeScript
Need node react reace-dom es6-promise
type definitions.
npm install -g dtsm
dtsm install node react reace-dom
import {Flux} from "flumpt";
interface State {
count: number;
}
class App extends Flux<State> {
subscribe() {
this.on("increment", () => {
this.update((s: State) => {
return {count: count + 1};
});
});
}
// ... render or others
}
See detail in index.d.ts
Middlewares
Middleware function type is <T>(t: T) => T | Promise<T>
or <T>(t: Promise<T>) => Promise<T>;
. (Use Promise.resolve if you consider promise)
Flux#render(state)
is always promise unwrapped promise but a middelware handle raw nextState received by Flux#update
.
LICENSE
MIT