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
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 testopen /test/test.html with a modern browser.