David Nguyen davidnguyen11

Can't share the complete code because the app's closed source and still in stealth mode, but here's how I'm using React Router and Redux in a large app with server rendering and code splitting on routes.

Server

Wildcard Express route configures a Redux store for each request and makes an addReducers() callback available to the getComponents() method of each React Router route. Each route is responsible for adding any Redux reducers it needs when it's loaded. (This isn't really necessary on the

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

	import React from 'react'
	import withRedux from 'next-redux-wrapper'
	import { initStore } from '@/store'

	class ExamplePage extends React.Component {
	render() {
	<h1>Hello Next.js</h1>
	}
	}

	import React from 'react'

	const dev = process.env.NODE_ENV !== 'production'

	// Note
	// this component will only work for ENV = development
	function CSSTag (props) {
	const { style } = props
	const element = dev && <style dangerouslySetInnerHTML={{ __html: style }} />
	return element

	import React from 'react'
	import withRedux from 'next-redux-wrapper'
	import { initStore } from '@/store'

	// style
	import style from '@/styles/index.scss'

	class IndexPage extends React.Component {
	render() {
	<div>

	import React from 'react'

	import CSSTag from '@/components/CSSTag';

	// style
	import style from '@/styles/Example.scss'

	class Example extends React.Component {
	render () {
	return (

	const gulp = require('gulp')
	const sass = require('gulp-sass')
	const minifyCSS = require('gulp-csso')

	gulp.task('app', () => {
	return gulp.src('./styles/**/app.scss')
	.pipe(sass().on('error', sass.logError))
	.pipe(minifyCSS())
	.pipe(gulp.dest('./static/css'))
	})

	// Future versions of Hyper may add additional config options,
	// which will not automatically be merged into this file.
	// See https://hyper.is#cfg for all currently supported options.

	module.exports = {
	config: {
	// default font size in pixels for all tabs
	fontSize: 12,

	// font family with optional fallbacks

	import React from 'react'
	import ReactDOM from 'react-dom/server'

	export default function Noscript (props) {
	const staticMarkup = ReactDOM.renderToStaticMarkup(props.children)
	return <noscript dangerouslySetInnerHTML={{ __html: staticMarkup }} />
	}

	.indexPage {
	.cardItem {
	margin-bottom: 15px;
	}
	}