diff --git a/examples/with-redux/components/Clock.js b/examples/with-redux/components/Clock.js
index 3174e21789d78..bd09f5407e73d 100644
--- a/examples/with-redux/components/Clock.js
+++ b/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 (
{format(new Date(lastUpdate))}
@@ -20,7 +17,7 @@ export default connect(state => state)(({ lastUpdate, light }) => {
`}
)
-})
+}
const format = t => `${pad(t.getHours())}:${pad(t.getMinutes())}:${pad(t.getSeconds())}`
diff --git a/examples/with-redux/components/Page.js b/examples/with-redux/components/Page.js
new file mode 100644
index 0000000000000..7846bbb236a86
--- /dev/null
+++ b/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 (
+
+
{title}
+
+
+
+ )
+})
diff --git a/examples/with-redux/package.json b/examples/with-redux/package.json
index 242ebc5c34127..14ca195e88983 100644
--- a/examples/with-redux/package.json
+++ b/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"
diff --git a/examples/with-redux/pages/index.js b/examples/with-redux/pages/index.js
index f5abc581ca823..5cb1b96028a72 100644
--- a/examples/with-redux/pages/index.js
+++ b/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 (
-
+
)
}
diff --git a/examples/with-redux/pages/other.js b/examples/with-redux/pages/other.js
new file mode 100644
index 0000000000000..b2d8a43def7d6
--- /dev/null
+++ b/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 (
+
+
+
+ )
+ }
+}
diff --git a/examples/with-redux/store.js b/examples/with-redux/store.js
index d9c05f7f532e1..250e47f2148df 100644
--- a/examples/with-redux/store.js
+++ b/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) => {