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";exportconstsystem=newSystem("counter");

Action

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

exportclassIncrement{}

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";exportclassCounterStoreextendsStore<{value: number}>{publicstate={value: 1};publiccreateReceive(){returnthis.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"constCounterStore=createStore((getState,setState)=>{returnReceiveBuilder.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"functionApp(){return<Providersystem={newSystem("app")}><Counter/></Provider>}

useStore

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

functionCounter(){constcounter=useStore(CounterStore)returnjsx}

useSystem

Take the system out of current context.

functionCounter(){constsystem=useSystem(CounterStore)return<buttononClick={()=>system.dispatch(newIncrement)}>+</button>}

Examples

• counter