delux-react

Delux-React

Delux bindings for React

import Store, {Collection} from 'delux';
import React from 'react';
import {ConnectedComponent} from 'delux-react';

class myComponent extends ConnectedComponent {
  static get collections () {
      return ['images'];
  }
  render () {
    return <div>{JSON.stringify(this.state.images)}</div>;
  }
}

let store = new Store ();

store.images = new Collection({});

<Provider store={store}>
  {connect(myComponent, ['images'])}
</Provider>

Features

• Simple React-Redux inspired syntax
• Extendable connected components

API Reference

Provider

Provider wraps connected components to the store.

Create a Provider

<Provider store={store}></Provider>

Description

The Provider is a React component which pass your store to it's child component through context.

Props

• store - Delux store to provide to the child component

ConnectedComponent

Creates React Components connected to the store.

Create a connected component

// ES6

class MyComponent extends ConnectedComponent {
    //...
}

MyComponent.collections = collectionNames;

// ES6 static getter

class MyComponent extends ConnectedComponent {
    static get collections () {
        return collectionNames;
    }
    //...
}

// ESNext

class MyComponent extends ConnectedComponent {
    static collections = collectionNames;
    //...
}

Parameters

• collectionNames - Store collections the component uses.

ConnectedComponent Instance

State

The state of the component is unified with the state of the selected collections.

Methods

dispatch()

Store#dispatch alias

Testing

in /delux-react:

 $ npm test

open /test/test.html with a modern browser.