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

    Keywords

    none

    Install

    npm i rcf-x

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • zinkey