Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/qwtel/flurx below:

qwtel/flurx: Flux using RxJS, advocating but not strictly enforcing immutable data structures.

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

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>
    );
  }
});

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4