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

1. 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;
  }
}

2. 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>
    );
  }
}

2. 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