reuni-react
v0.1.0-beta.1
Published
React bindings for Reuni
Downloads
11
Maintainers
Readme
reuni-react ·
React bindings for Reuni
Install
npm install reuni-react --save
Example
A complete example is under /example
directory.
Online example can be found here: Here.
Quick Start
- Design a suitable store for react component.
import { value, task, delay } from "reuni-react";
export default class ExampleStore {
@value name = "test";
@value cnt = 0;
@task
add(num: number) {
this.cnt += num;
}
@task.async
async addAsync(num: number) {
await delay(100);
this.cnt += num;
}
}
- Using this store in react component.
import * as React from "react";
import ExampleStore from "./ExampleStore";
export type Props = {
exampleStore: ExampleStore;
};
export default class ExampleComponent extends React.Component<Props> {
render() {
let { exampleStore } = this.props;
return (
<div>
<div>{exampleStore.cnt}</div>
<button onClick={()=>exampleStore.add(1)}>Add</button>
<button onClick={()=>exampleStore.addAsync(1)}>Add Async</button>
<div>
);
}
}
- Export react component with store as HOC.
import { storeObserver, Provider, createMount } from "src";
import ExampleStore from "./ExampleStore";
import ExampleComponent from "./ExampleComponent";
const HOC = mount(
ExampleComponent,
storeObserver(({ exampleStore }) => ({
exampleStore
}))
)
.addStore("exampleStore", ExampleStore)
.toHOC();
export default HOC