Connect
The data-fetching decorator for Lore
The data-fetching decorator for Lore
This is a utlity function to make it easier to retrieve data from the Redux store, when you just want the data, and don't necessarily want to invoke an action.
The basic usage looks like this:
import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import { getState } from 'lore-hook-connect';
import Tweet from './Tweet';
export default createReactClass({
displayName: 'Tweets',
render() {
const tweets = getState('tweet.find');
return (
<ul>
{tweets.data.map((tweet) => {
return (
<Tweet
key={tweet.id}
tweet={tweet}
/>
);
})}
</ul>
);
}
}))
Not this function is not recommended for regular use. It exists because there are times when it's useful, but usage of it should be rare.
Considering obtaining a copy of getState is the principle purpose of connect, it's possible to create a components without using connect directly by doing the following.
import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import { getState } from 'lore-hook-connect';
import Tweet from './Tweet';
export default createReactClass({
displayName: 'Tweets',
getInitialState() {
return {
tweets: getState('tweet.find')
};
},
componentWillMount() {
this.setState({
tweets: getState('tweet.find')
});
},
componentWillReceiveProps(nextProps) {
this.setState({
tweets: getState('tweet.find')
});
},
render() {
const tweets = getState('tweet.find');
return (
<ul>
{tweets.data.map((tweet) => {
return (
<Tweet
key={tweet.id}
tweet={tweet}
/>
);
})}
</ul>
);
}
}))
However, this is highly discouraged, unless you really find yourself needing to for some reason. For example, this approach would give you access to context, but you can also access it through the options argument of connect.
This approach is also more verbose, as it requires you to store data in state, and you have to update state both during the "mounting" callbacks (componentWillMount) and the "update" callbacks (componentWillReceiveProps).
This approach also has some risk, as changes to Lore in the future (to support rendering multiple application within the same browser window) may make it impossible to support this, unless getState is itself provided through context.