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';;
User.js
; { return <div> name: thispropsusername age: thispropsuserage </div>; };
Age.js
; { return <div> age: thispropsuserage <button onClick= thispropsuser>click</button> </div>; };
App.js
;;;; { 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;
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 a: estorea - step store2: a: 2 { ; } ;
or you can use e.setStore to handel async callback,
const store = store1: a: 1 { ; } 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: obj ;
So you can use "this.props.store1.setStore" in simple app.
http://flutejs.github.io/rcf/examples/example-simple.html
Example
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 |