Overview

Dispersive is a front end library used to manage one state (or store) using several models.

A dispersive application is composed of :

• Models: defining the data structure with relations.
• Actions: that updates the store using transactions changes and propagate events.
• Views/Components: Another library (like React) to render the state on screen.

Getting Started

Using create-react-app

1. Create React App

If you don't have _create-react-app _you'll should install it using npm:

$ npm install -g create-react-app

Then into your project folder, execute this command:

$ create-react-app hello-react

When the app creation ends, start it using these commands:

$ cd hello-react/
$ npm start

Now the local server is running and your browser. It will update automatically when your code change.

2. Install Dispersive

Run this command:

$ npm install dispersive react-dispersive

react-dispersive is used to bind dispersive from React.

3. Example code

Replace the App.js file with this :

import React, { Component } from 'react';
import { createModel, createAction } from 'dispersive';
import { withField } from 'dispersive/field';
import { Watcher } from 'react-dispersive';

const Clicker = createModel([
  withField('hits'),
]);

const createClicker = createAction(() => (
  Clicker.objects.create({ hits: 0 })
)), Clicker);

const getClicker = () => (Clicker.objects.get() || createClicker());

const hit = createAction((key) => {
  const clicker = Clicker.objects.get(key);

  clicker.hits++;
  clicker.save();
}, Clicker);

const ClickerApp = ({ clicker }) =>
  <div>
    You clicked { clicker.hits } times.
    <button onClick={() => hit(clicker.key)}>Hit me</button>
  </div>
};

export default App = () => (
  <Watcher models={ Clicker } state={() => ({clicker: getClicker()})}>
    <ClickerApp />
  </Watcher>
);