Rcf

Rcf is a react component, it uses a clear and simple way to manage your state: Do not use "this.state" and "this.setState", just use store, which is a plain object.

Put your component in Rcf and Rcf allows it to get store by "this.props.*" and set store by "this.props.set".When you call 'set' function,it will change the value of store, then all of the Rcf component using this store will be re rendered.

Examples

http://flutejs.github.io/rcf/

Install

npm install rcf

Usage

class A extends Component {
  handleClick = () => {
    this.props.set({
      a: this.props.a - 1,
    });
  }
  render() {
    return <div>

      A:

      {this.props.a}

      <button onClick={this.handleClick}>
        click
      </button>

    </div>;
  }

}


class B extends Component {
  render() {
    return <div>

      B:

      {this.props.a} 

    </div>;
  }

}


const store = {a: 1};

ReactDOM.render(<div>

  <Rcf store={store}>
    <A />
    <B />
  </Rcf>

  <Rcf store={store}>
    <B />
  </Rcf>

</div>,

mountDom);

http://flutejs.github.io/rcf/examples/example-a.html

API

propsclass A extends Component {

handleClick = () => { this.props.set({ a: this.props.a - 1, }); } render() { return

  A:

  {this.props.a}

  <button onClick={this.handleClick}>
    click
  </button>

</div>;

  B:

  {this.props.a} 

</div>;