Ractor

Another action based state management tool

 

中文文档

Install

npm i ractor

Quick Start

Ractor builds upon three main ideas.

System

System is an event system. Normally, You need to create one for your logic app.

import { System } from "ractor";
export const system = new System("counter");

Action

The abstraction of system behavior. You can create it by class.

export class Increment {}

Store

Conceptually, your can think of Store like a event handler or redux’s reducer.

Store is an abstract class, abstract method createReceive needs to return an Receive object. There is a convenient helper method receiveBuilder to help you to create Receive object

import { Increment } from "./Increment";
import { Decrement } from "./Decrement";
import { Store } from "ractor";
 
export class CounterStore extends Store<{ value: number }> {
  public state = { value: 1 };
  public createReceive() {
    return this.receiveBuilder()
      .match(Increment, async () =>
        this.setState({ value: this.state.value + 1 }))
      .match(Decrement, async () =>
        this.setState({ value: this.state.value + 1 }))
      .build();
    }
}

There is a convenient function createStore to createStore quickly.

import { ReceiveBuilder } from "ractor"
 
const CounterStore = createStore((getState, setState) => {
  return ReceiveBuilder
    .create()
    .match(Increment, () => setState(getState() + 1))
    .match(Decrement, () => setState(getState() - 1))
    .build()
}, 0)

React

There is the quick glance of ractor-hooks

Provider

Create an event system for your App.

  import { Provider } from "ractor-hooks"
  import { System } from "ractor"
 
  function App() {
    return <Provider system={new System("app")}><Counter /></Provider>
  }

useStore

Inject Store to your component, return the state of the store which had injected.

function Counter() {
  const counter = useStore(CounterStore)
  return jsx
}

useSystem

Take the system out of current context.

function Counter() {
  const system = useSystem(CounterStore)
  return <button onClick={() => system.dispatch(new Increment)}>+</button>
}

Examples

• counter