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.
Permalink
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
README.md
package.json

README.md

Flurx

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.

Description

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

Installation

npm install flurx

Example

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() {
    super({
      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})
        .then(LoginActionSuccess)
        .catch(LoginActionFailure);

      return Object.assign(store, {
        isLoggedIn: true,
        username,
        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 => {
      this.setState(store);
    });
  },

  onSubmit(e) {
    e.preventDefault();

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

    if (!username || !password) {
      return;
    }

    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.