react-sync-state

Introduction

Note: The code is still under development.

A React Library for linking state objects with React UI Elements. The idea behind the code is to make the UI Elements responsive with the changes made on the state of the application on the server side without as little code as possible and the state to load all the data on one go at the client and listen on the server for every bits of change on the state.

The state is represented using RecordSet and Record object. When the application first loads, a JSON could be used to load the initial state. The application currently provides one loader - JavaSyncStateLoader which loads the data using a custom a JSON format that I have been using on my application.

Usage

A basic usage for this library might look

// The library provides Loader and Component 
import {Loader, Component} from 'react-sync-state';
import React, { render } from 'react';


const stateData = {}; // this is supposed to be provided while loading the page

// The state is loaded and waits on the server for any changes 
// probably via EventStream (To be implemented)
const state = loader.load(stateData);

// The class is extended from Component and not React.Component 
// and it is expected to get the state as the record instance if
// used correctly (via Record#render)
class User extends Component {
  render() {
    var user = this.state;
    return (
      <tr>
        <td>{user.id}</td>
        <td>{user.username}</td>
        <td>{user.name}</td>
      </tr>
    );
  }
}

// The class is extended from Component and not React.Component
// and it is expected to get the list of records in this.state.lis
// if used correctly (via RecordSet#render or #renderList)
class UserList extends Component {
  render() {
    var records = this.state.list;
    return (
      <table>
        <thead>
        <tr>
          <th>ID</th>
          <th>Username</th>
          <th>Name</th>
        </tr>
        </thead>
        <tbody>
          { this.props.children }
        </tbody>
      </table>
    );
  }  
}

var list = state.getList("users").render(UserList, {}, User);

render(list, document.body);