dispersive-react

Binding of dispersive for react components.

Install

This package has 2 peer dependancies : dispersive and react.

npm install dispersive react dispersive-react

Usage

import {Store} from 'dispersive';
import React, {Component} from 'react';
import {Watcher} from 'dispersive-react';
 
const schema = {
  name: '',
  price: 0,
};
 
const products = Store.createObjects({schema});
 
const Product = ({product}) => (
  <li className="product">
    <div className="name">{product.name}</div>
    <div className="price">{product.price}</div>
  </li>
);
 
const ProductList = ({products}) => (
  <ul>
    {products.map(product => (
      <Watcher sources={{product}}>
        <Product product={product} />
      </Watcher>
    ))}
  </ul>
);
 
class App extends Component {
 
  render() {
    return (
      <Watcher sources={{products}}>
        <ProductList products={products} />
      </Watcher>
    )
  }
 
};
 
export default App;

In this example, both the list and the product are observers.

So, if you type this:

products.create({name: 'ball', price: 12.5});

Then, the list will re-render.

And if you type this :

products.first().update({price: 15.25});

Then, the only the concerned Product element will re-render.