Higher order component for reflux
$ npm install --save reflux-hoc
You can directly get the data from a stores as props
with connectToData
.
import { connectToData } from 'reflux-hoc';
connectToData(
{ users: UserStore } // the store you want to connect to.
, (props, actionData) => ({ users: users.getUsers() }) // this function is call for the initialState and if the store changes.
, function({ users }) { // the users are passed down as a prop
return (
<ul>
{this.props.users.map(u => <li>{u.name}</li>)}
</ul>);
}
);
❗
This uses calls the provided onChange
function on the child component.
If you use more then one HOC, make sure connect
is applied directly to the component.
❗
import connect from 'reflux-hoc';
const Component = React.createClass({
onStoreChange () {
// called on change
},
render () { return <h1>Fire</h1> }
});
const ConnectedComponent = connect(Store, 'onStoreChange', Component);
// connectToData :: { b: Store } -> ({ a: * }) -> Component -> Component
connectToData({ PersonStore, PostStore }, (props, actionData) => ( { persons: PersonStore.getPersons(), posts: PostStore.getPosts() } ), Component);
// connect :: Store -> String -> Component -> Component
connect(Store, CallbackName, Component);
// connect :: [Store] -> String -> Component -> Component
connect([Store1, Store2], CallbackName, Component);
// or
const connectToStores = connect([Store1, Store2]);
connectToStores('onStoresChange', Compnent);
MIT © Christoph Hermann