Rcf-x

Rcf-x is a react component based on Rcf, it uses a clear and simple way to manage store and action

Put your component in Rcf-x and Rcf-x allows it to get store by "this.props.*" and set store by action.

store

The store is a plain object which can only be modified by action.

var store = {a: 1};

action

The action is a map, each key is the name of action that can be called by "this.props[name]", and the value is a function that will return a plain object or a promise.

const action = {
  minus: store => ({
    a: store.a - 1,
  })
}

You can call other action in a action:

const action = {
  minus2: store => ({
    a: store.a - 1,
  }),
  minus1: (store, action) => action.minus1(store),
}

or use promise:

const action = {
  minus: store => new Promise(resolve => setTimeout(() => resolve({
      a: store.a - 1
    }), 1000)),
}

You can even transform your action into another action like "middleware": http://flutejs.github.io/rcf-x/examples/example-b.html

Then, you can call the store and action:

this.props.a
this.props.minus()

Install

npm install rcf-x

Example

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

class A extends Component {
  handleClick = () => {
    this.props.syncMinus();
  }
  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 action = {

  syncMinus(store, action) {
    return {
      a: store.a - 1,
    }
  },

};


const store = {a: 1};


ReactDOM.render(<div>
  
  <Rcfx store={store} action={action}>
    <A />
    <B />
  </Rcfx>
  
  <Rcfx store={store}>
    <B />
  </Rcfx>

</div>,

mountDom);

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

API

props

</tbody>