rcf-x

0.1.0 • Public • Published

Rcf-x

NPM version

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>
name type description
store object plain object
action object the return value of action is a plain object or a promise

Readme

Keywords

none

Package Sidebar

Install

npm i rcf-x

Weekly Downloads

0

Version

0.1.0

License

MIT

Last publish

Collaborators

  • zinkey