React and 7.5M Daily Users
0 likes161 views
This document discusses React routing and data fetching techniques. It provides examples of route configuration with names, paths, and components. It also shows how to fetch data asynchronously when route changes occur and prior to component rendering. Async data is fetched using a custom data fetcher function and promises to resolve the data before setting the previous location to null.
React and 7.5M Daily Users
- 2. sites 7 Daily Users 7.5M Daily Requests 133M served/month 8500TB+ hours of video/day 30000+ Videos 600000+
- 5. We are always looking for New Talent…
- 7. 1 year ago
- 8. 1 year ago
- 9. Lessons Learned Routing SEO Asset Management Error Handling Logging Styling User Tracking Session handling Caching State ManagementSecurity Code Splitting Server side Rendering Styling Animations
- 12. Routing
- 13. Routing
- 14. Routing { name: 'home', path: '/', component: bundle.Home, fetchData: dataFetcher.fetchHomeData, },
- 15. Routing { name: 'favourites', path: '/users/:username/favourites', component: bundle.Favorites, requireAuth: true, },
- 16. Routing <Link to="video_listing" params={{ sort: 'views', time: 'month' }} > ... </Link>
- 18. Data Fetching
- 22. Async Data Fetcher render() { const { children, location } = this.props; const { previousLocation } = this.state; return ( <Route location={previousLocation || location} render={() => children} /> ); }
- 23. Async Data Fetcher componentWillReceiveProps(nextProps) { const nextLoc = nextProps.location; if (this.hasNavigated(nextLoc)) { this.setState({ previousLocation: this.props.location, }); this.loadAsyncData(nextProps.location); } }
- 24. Async Data Fetcher loadAsyncData(location) { const { match, route } = routeMatcher(location.pathname, routes); const { queryParams } = routeParamsExtractor(location); asyncDataFetcher( route.fetchData, this.getStore(), Object.assign(match.params, queryParams), ).then(() => { this.setState({ previousLocation: null, }); }) }