Rcf

Rcf is a react component, it uses a clear and simple way to manage store.

Put your component in Rcf and Rcf allows it to get store by "this.props.storeName.*".The components in Rcf can share the same store and when the store changes, they will be re rendered.

Let's start it !

UserStore.js

const UserStore = {
  name: 'lily',
  age: '18',
};
export default UserStore;

User.js

import React, { Component } from 'react';
class User extends Component {
  render() {
    return <div>
    name: {this.props.user.name}
    age: {this.props.user.age}
  </div>;
  }
}
export default User;

Age.js

import React, { Component } from 'react';
class Age extends Component {
  render() {
    return <div>
    age: {this.props.user.age}
    <button onClick={() => this.props.user.setStore({age: this.props.user.age - 1})}>click</button>
  </div>;
  }
}
export default Age;

App.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import userStore from './userStore';
import User from './User';
import Age from './Age';

class App extends Component {
  render() {
  const store = {
    user: userStore,
  };
  return <div>
    <Rcf store={store}>
      Put User in Rcf.
      <User />
    </Rcf>

    <Rcf store={store}>
      Put Age in Rcf.
      <Age />
    </Rcf>
    
    <Rcf store={store}>
      You can put them in Rcf too.
      <User />
      <Age />
    </Rcf>
    </div>
  }
}

ReactDOM.render(<App />, mountDom);

You can see this example here: http://flutejs.github.io/rcf/examples/example-index.html

store

The store is a plain object which can only be modified by function in store. If the type of the value is a function, it will return a plain object or a promise,

const store = {
  store1: {
    a: 1,
    b: 1,
      minus: (step, e) => ({
        a: e.store.a - step
      }),
  },
  store2: {
    a: 2,
    minus: (step, e) => new Promise(resolve => {
        setTimeout(() => resolve({
           a: e.store.a - step,
        }), 1000);
    }),
  }
};

or you can use e.setStore to handel async callback,

const store = {
  store1: {
    a: 1,
      minus: (step, e) => {
      setTimeout(() => {
        e.setStore({
          a: e.store.a - step,  
        });
      }, 1000);
      },
  },
  store2: {
    a: 2,
  }
};

As you see, the last argument is an Event, which has properties:

• store: Plain object

• setStore: Function

There's a default function 'setStore' in store object. If you define a store:

const store = {
  store1: {},
};

Rcf will transform it to

const store = {
  store1: {
    setStore: obj => obj,
  },
};

So you can use "this.props.store1.setStore" in simple app.

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

Example

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

Install

npm install rcf

API

props

name	type	description
store	object	plain object
tag	string | object	default is 'div', the root element When the number of children is greater than 1, set root element to tag