Skip to content
This repository has been archived by the owner. It is now read-only.
Flux using RxJS, advocating but not strictly enforcing immutable data structures.
Branch: master
Clone or download
Pull request Compare This branch is 8 commits ahead, 2 commits behind codesuki:master.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src remove implicit success/failure actions Apr 7, 2015
.gitignore initial commit Apr 6, 2015
.npmignore update Apr 6, 2015
LICENSE fixes Apr 6, 2015


Following the tradition of ridiculously titled Flux variations, I'm proud to announce Flurx.

Flux using RxJS, advocating but not strictly enforcing immutable data structures.


It's a very thin wrapper around Rx.Subject for Actions and Rx.BehaviorSubject for Stores, basically adding only two methods:

  • waitFor on Actions
  • register on Stores

In a nutshell:

  • A Store is modelling a value that is changing over time (i.e. BehaviorSubject)
  • A Store can subscribe to many Actions, each with a handler
  • A handler receives the call parameters of the action and produces a new value of the store.
  • React components can subscribe to Stores
  • React components can call Actions


npm install flurx


import React from 'react';
import {Store, Action} from 'flurx';

const LoginAction = Action.create();
const LoginActionSuccess = Action.create();
const LoginActionFailure = Action.create();

class LoginStore extends Store {
  constructor() {
      isLoggedIn: false,
      username: null,
      warn: null

    this.register(LoginAction, this.onLogin);
    this.register(LoginActionSuccess, this.onLoginSuccess);
    this.register(LoginActionFailure, this.onLoginFailure);

  onLogin(store, username, password) {
    if (!store.isLoggedIn) {
      getJSON('/login', {username, password})

      return Object.assign(store, {
        isLoggedIn: true,
        warn: null

    return store;

  onLoginSuccess(store, result) {
    return Object.assign(store, {
      isLoggedIn: true,
      username: result.username
      warn: null

  onLoginFailure(store, err) {
    return Object.assign(store, {
      isLoggedIn: false,
      username: null,
      warn: err.message

const loginStore = new LoginStore();

const LoginComponent = React.createClass({
  getInitialState() {
    return loginStore.getValue();

  componentDidMount() {
    loginStore.subscribe(store => {

  onSubmit(e) {

    const username = this.refs.username.getValue().trim();
    const password = this.refs.password.getValue().trim();

    if (!username || !password) {

    LoginAction(username, password);

  render() {
    return (
      !this.state.isLoggedIn ?
        <form method="GET" action="/login" onSubmit={this.onSubmit}>
          {this.state.warn != null ? <p>{this.state.warn}</p> : null}
          <input ref="username" name="username" type="text"/>
          <input ref="password" name="password" type="password"/>
          <button type="submit">Login</button>
        </form> :
        <p>Welcome, {this.state.username}.</p>
You can’t perform that action at this time.