This package has been deprecated

Author message:

WARNING: Not recommended to use

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();
  }
}