0.0.22 • Published 9 years ago
flacks v0.0.22
Flacks
Example
/*
* Actions
*/
import {Action} from 'flacks';
const updateFoo = Action.create((dispatch) =>
(nextFoo) => dispatch(nextFoo)
);
const destroyFoo = Action.notifier();
/*
* Stores
*/
import {Store} from 'flacks';
function mapStateWhenFooWillUpdate(state, nextFooValue) {
return Object.assign({}, state, {foo: nextFooValue});
}
function mapStateWhenFooWillDestroy(state) {
return Object.assign({}, state, {foo: null});
}
const fooStore = Store.partial({foo: 'Initial foo value'})
.subscribe(updateFoo, mapStateWhenFooWillUpdate)
.subscribe(destroyFoo, mapStateWhenFooWillDestroy);
const store = Store.create(fooStore);
/*
* Components
*/
import {connect} from 'flacks';
@connect(store) // same as @connect(store, (storeState) => storeState)
class Component extends React.Component {
state = {foo: this.props.foo};
componentWillReceiveProps(nextProps) {
if (this.state.foo !== nextProps.foo) {
this.setState({foo: nextProps.foo});
}
}
render() {
return (
<div>
<h1>{this.props.foo}</h1>
<form onSubmit={this.handleSubmit.bind(this)}>
UPDATE FOO: <input value={this.state.foo} onChange={this.handleFooChange.bind(this)}>
</form>
<button onClick={this.handleDestroyFooClick.bind(this)}>DESTROY FOO</button>
</div>
);
}
handleSubmit(e) {
e.preventDefault();
updateFoo.invoke(this.state.foo);
}
handleFooChange(e) {
this.setState({foo: e.target.value});
}
handleDestroyFooClick() {
destroyFoo.invoke();
}
}
0.0.22
9 years ago
0.0.21
9 years ago
0.0.20
10 years ago
0.0.19
10 years ago
0.0.18
10 years ago
0.0.17
10 years ago
0.0.16
10 years ago
0.0.15
10 years ago
0.0.14
10 years ago
0.0.13
10 years ago
0.0.12
10 years ago
0.0.11
10 years ago
0.0.10
10 years ago
0.0.9
10 years ago
0.0.8
10 years ago
0.0.7
10 years ago
0.0.6
10 years ago
0.0.5
10 years ago
0.0.4
10 years ago
0.0.3
10 years ago
0.0.2
10 years ago
0.0.1
10 years ago
0.0.0
10 years ago