// Without Redux
class NoRedux extends Component {
    state = {
        dogs: null,
        cats: null,
        resourcesLoaded: false,
    };

    componentWillMount() {
        Promise.all([api.loadDogs(), api.loadCats()])
            .then((dogs, cats) => {
                this.setState({
                    dogs,
                    cats,
                    resourcesLoaded: true
                });
            });
    }

    render() {
        const { dogs, cats, resourcesLoaded } = this.state;

        return (
            {!resourcesLoaded && (
                <MyFancyLoader />
            )}
            {resourcesLoaded && (
                <AnimalStuff dogs={dogs} cats={cats} />
            )}
        );
    }
}

module.exports = NoRedux;

// With Redux
class YesRedux extends Component {
    static propTypes = {
        loadDogs: PropTypes.func.isRequired,
        loadCats: PropTypes.func.isRequired,
        dogs: PropTypes.arrayOf(PropTypes.shape(DOG_SHAPE)),
        cats: PropTypes.arrayOf(PropTypes.shape(CAT_SHAPE)),
    };

    componentWillMount() {
        loadDogs();
        loadCats();
    }

    render() {
        const { dogs, cats } = this.props;
        const resourcesLoaded = dogs !== null && cats !== null // what is correct way to indicate "not loaded" in redux?

        return (
            {!resourcesLoaded && (
                <MyFancyLoader />
            )}
            {resourcesLoaded && (
                <AnimalStuff dogs={dogs} cats={cats} />
            )}
        );
    }
}

module.exports = connect(
    (state) => ({
        dogs: reducer.getDogs(state), // what if this getter requires a prop of the component?
        cats: reducer.getCats(state),
    }),
    {
        loadDogs: reducer.loadCats,
        loadCats: reducer.loadDogs,
    }
)(YesRedux);