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>Provider wraps connected components to the store.
<Provider store={store}></Provider>The Provider is a React component which pass your store to it's child component through context.
- store - Delux store to provide to the child component
Creates React Components connected to the store.
// 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;
//...
}- collectionNames - Store collections the component uses.
The state of the component is unified with the state of the selected collections.
dispatch()
Store#dispatch alias
in /delux-react:
$ npm testopen /test/test.html with a modern browser.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent