React bindings for Lazyx.
Note: It is an alpha release. API might change any time. Don't use in the production.
$ npm install --save lazyx react-lazyx
Provider
is a React component that makes Lazyx store available for connect
calls in the component hierarchy below.
store
- single instance of Lazyx Store. It does not allowed to send new store to theProvider
during application lifecycle.
ReactDOM.render(
<Provider store={store}>
<MyRootComponent />
</Provider>,
document.getElementById('root')
)
connect
is a function that connects custom React component to the Lazyx store. It has following signature:
type MapTreeToTransformers = (tree: any) => {[key: string]: Observable<any>};
type MapTransformersToProps = <T>(receivedDataMap: {[key: string]: any}, ownProps: T) => ({[key: string]: any});
function connect(mapTreeToTransformers: MapTreeToTransformers, mapTransformersToProps?: MapTransformersToProps): React.Component;
mapTreeToTransformers
- this argument receives a function that defines what transformers you want to subscribe your component to. It means that the component will be redrawn if the new value is emitted by transformer.mapTransformersToProps
- this argument is additional. It receives a function that defines what part of value emitted by transformer will be received as a prop by component. If this argument is not specified, values will be sent as is. If the result object does not have some emitted values, they will be excluded from props.
@connect(
tree => ({
todos: tree.todos,
someAnotherTransformer: tree.someAnotherTransformer
}),
({todos, someAnotherTransformer}) => ({ // someAnotherTransformer is now just a value emitted by real someAnotherTransformer
todos,
someElement: someAnotherTransformer.someElement
})
)
export class MyTodosComponent extends React.Component {}
connectDynamically
is a function that connects custom React component to the dynamic elements of the Lazyx store, like arrays
of transformers, by receiving them as props and subscribing to them. Function signature is following:
function connectDynamically(mapTransformersToProps?: MapTransformersToProps): React.Component;
The result component has additional property transformers
that receives map of transformers.
mapTransformersToProps
- if this argument is defined, it receives function that is same tomapTransformersToProps
ofconnect
function.
@connectDynamically(
({todo}) => ({
name: todo.name
})
)
export class MyTodoComponent extends React.Component {}
ReactDOM.render(
<MyTodoComponent transformers={{todo: tree.todos[0]}} />,
document.getElementById('root')
)