Rxact

Rxact is an observable application management for Javascript app.

中文 README

Introduction

Rxact help developer managing application logic and state. Rxact is related to reactive programing, make sure it is what you are familiar with or you want.

Docs

• API Document

Core Concept

No Store

It means there is no concept about store in Rxact, but you can still store state. In other state containers like Redux, store is a core concept, because they are forcing on state management. But for mordern Javascript application, state management is not good enough. We need to maintain complex application logic now.

Stream

Image your application from top to down, for example, from 'user login' to 'button click'. You will see lots of logic streams, and they are combined and splited. That is what Rxact thinking, managing your application in stream way.

StateStream

The core component in Rxact is StateStream, which is a stream of state. In StateStream you can define operator and event for state, then you can observe the changing of state. And StateStream can even combined together to become a new StateStream. That is the way Rxact manage your application.

Installation

yarn add rxact

Getting Started

Step 1, chosing your favorite observable lib.

Rxact supports any lib implement ECMAScript Observable . including(but not only):

• RxJS 5
• zen-observable
• xstream (combining with rxact-xstream)
• more...

Step 2, setup Rxact.

Assume you chosed RXJS, then

import { StateStream } from 'rxact'
import Rx from 'rxjs'
import { setup } from 'rxact'

setup({ Observable: Rx.Observable })

Step 3, let's start by writing a counter

import { StateStream } from 'rxact'

/**
 * StateStream is a stream for managing state and logic.
 * You shold named the stream and give it initial value.
 * After that, we can emit value and listen to it.
 */
const stream = new StateStream('stream', 0)

/**
 * Emitter is a operator for emitting new value. We define a emitter named "increment" here.
 * Everytime "increment" executed, "stream" will receive new value which equal to previous value plus input value.
*/
stream.emitter('increment', value => prevState => (prevState + value))

/**
 * Subscribing the stream and outputting values.
 * After you subscribed, it will output current value immediately, which means initial value here.
**/
stream.subscribe(value => { console.log(value) })

stream.increment(1)
// output 1.
stream.increment(1)
// output 2.
stream.increment(2)
// output 4.

For more infomation, please check documents below.

Examples

Here are more complex exmaples

• Counter
• TodoMVC
• Async
• Real World

You can checkout the source code on rxact-examples.

Plugins

You can enhance Rxact by adding plugins.

• Rxact-React Rxact binding for React.
• Rxact-Debugger debugging and friendly log.
• Rxact-Rxjs Rxact support Rxjs natively, but you can get advanced function here.
• Rxact-Xstream Combine Rxact and xstream.

Lisence

MIT