MovieList.jsx

import * as React from 'react';
import MyFavoriteMoviesFetcher from './MyFavoriteMoviesFetcher';
import FavoriteButton from './FavoriteButton';

// MovieList has access to props passed to it.
// It also has access to favoriteMovies and viewingStats, which are values calculated from the redux store.
// It can pinpoint exactly which children/nested children need these props.
// You no longer need to pass props from parent to child to child to child. You can target the level that needs the props.
const MovieList = (props) => (
  <MyFavoriteMoviesFetcher>
    {(favoriteMovies, viewingStats) => (
      <FavoriteButton favoriteMovies={movies} />
      <OtherComponent>
        <NestedChild vieiwngStats={viewingStats}>
          <AnotherChild>
            <DeeplyNestedChild favoriteMovies={movies} viewingStats={viewingStats}/>
            <SecondDeeplyNested favoriteMovies={movies} />
          </AnotherChild>
        </NestedChild>
      </OtherComponent>
    )}
  </MyFavoriteMoviesFetcher>
);

MyFavoriteMoviesFetcher.jsx

import * as React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import actions from './actions';

class MyFavoriteMoviesFetcher extends React.Component {
  static defaultProps = {
    isLoading: false,
    movies: null,
    viewingStats: null
  }
  
  componentDidMount() {
    this.props.fetchFavoriteMovies(); 
    this.props.fetchViewingStats();
  }
  
  render() {
     return this.props.children(this.props.movies, this.props.viewingStats);
  }
}

const mapStateToProps = (state) => ({
  movies: state.favoriteMovies
});
const mapDispatchToProps = dispatch => bindActionCreators({ 
  fetchFavoriteMovies: actions.fetchFavoriteMovies,
  fetchViewingStats: actions.fetchViewingStats,
});
export default connect(mapStateToProps, mapDispatchToProps)(MyFavoriteMoviesFetcher);