Routing on the client with Redux (#691)

* Routing on the client with Redux

* Removing unused import

examples/with-redux/components/Clock.js

@@ -1,7 +1,4 @@
-import React from 'react'
-import { connect } from 'react-redux'
-
-export default connect(state => state)(({ lastUpdate, light }) => {
+export default ({ lastUpdate, light }) => {
   return (
     <div className={light ? 'light' : ''}>
       {format(new Date(lastUpdate))}
@@ -20,7 +17,7 @@ export default connect(state => state)(({ lastUpdate, light }) => {
       `}</style>
     </div>
   )
-})
+}
 
 const format = t => `${pad(t.getHours())}:${pad(t.getMinutes())}:${pad(t.getSeconds())}`
 

examples/with-redux/components/Page.js

@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import { connect } from 'react-redux'
+import Clock from './Clock'
+
+export default connect(state => state)(({ title, linkTo, lastUpdate, light }) => {
+  return (
+    <div>
+      <h1>{title}</h1>
+      <Clock lastUpdate={lastUpdate} light={light} />
+      <nav>
+        <Link href={linkTo}>Navigate</Link>
+      </nav>
+    </div>
+  )
+})

examples/with-redux/package.json

@@ -7,7 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "*",
+    "next": "^2.0.0-beta",
     "react-redux": "^5.0.1",
     "redux": "^3.6.0",
     "redux-thunk": "^2.1.0"

examples/with-redux/pages/index.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import { Provider } from 'react-redux'
 import { reducer, initStore, startClock } from '../store'
-import Clock from '../components/Clock'
+import Page from '../components/Page'
 
 export default class Counter extends React.Component {
   static getInitialProps ({ req }) {
     const isServer = !!req
     const store = initStore(reducer, null, isServer)
-    store.dispatch({ type: 'TICK', ts: Date.now() })
+    store.dispatch({ type: 'TICK', light: !isServer, ts: Date.now() })
     return { initialState: store.getState(), isServer }
   }
 
@@ -27,7 +27,7 @@ export default class Counter extends React.Component {
   render () {
     return (
       <Provider store={this.store}>
-        <Clock />
+        <Page title='Index Page' linkTo='/other' />
       </Provider>
     )
   }

examples/with-redux/pages/other.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import { reducer, initStore, startClock } from '../store'
+import Page from '../components/Page'
+
+export default class Counter extends React.Component {
+  static getInitialProps ({ req }) {
+    const isServer = !!req
+    const store = initStore(reducer, null, isServer)
+    store.dispatch({ type: 'TICK', light: !isServer, ts: Date.now() })
+    return { initialState: store.getState(), isServer }
+  }
+
+  constructor (props) {
+    super(props)
+    this.store = initStore(reducer, props.initialState, props.isServer)
+  }
+
+  componentDidMount () {
+    this.timer = this.store.dispatch(startClock())
+  }
+
+  componentWillUnmount () {
+    clearInterval(this.timer)
+  }
+
+  render () {
+    return (
+      <Provider store={this.store}>
+        <Page title='Other Page' linkTo='/' />
+      </Provider>
+    )
+  }
+}

examples/with-redux/store.js

@@ -9,7 +9,7 @@ export const reducer = (state = { lastUpdate: 0, light: false }, action) => {
 }
 
 export const startClock = () => dispatch => {
-  setInterval(() => dispatch({ type: 'TICK', light: true, ts: Date.now() }), 800)
+  return setInterval(() => dispatch({ type: 'TICK', light: true, ts: Date.now() }), 800)
 }
 
 export const initStore = (reducer, initialState, isServer) => {