Skip to content

Instantly share code, notes, and snippets.

@matthamil
Created April 2, 2018 13:38
Show Gist options
  • Save matthamil/482686df1ee47dabd44632cac07c4dc2 to your computer and use it in GitHub Desktop.
Save matthamil/482686df1ee47dabd44632cac07c4dc2 to your computer and use it in GitHub Desktop.
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>
);
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment