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