0.1.0 • Published 8 years ago
rcf-x v0.1.0
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.propsname", 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
0.1.0
8 years ago