Redux FetchAndConnect

fetchAndConnect.js

import React from 'react';
import { connect } from 'react-redux';

class FetchComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            dataFetched: false
        };
    }

    componentWillMount() {
        const { getter, dispatch } = this.props;
        dispatch(getter).then(() => {
            this.setState({
                dataFetched: true
            });
        });
    }

    render() {
        const { Component, getter, ...rest } = this.props;

        if (this.state.dataFetched) {
            return <Component {...rest} />;
        }
        return null;
    }
}

FetchComponent.propTypes = {
    getter: React.PropTypes.func.isRequired,
    dispatch: React.PropTypes.func.isRequired,
    Component: React.PropTypes.func.isRequired
};

const Fetch = connect()(FetchComponent);

export const fetchAndConnect = (getter, ...connectArgs) => Component => {
    return () =>
        <Fetch
            getter={getter}
            Component={connect(...connectArgs)(Component)}
        />;
};