diff --git a/examples/with-redux/components/Clock.js b/examples/with-redux/components/Clock.js index 3174e217..bd09f540 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 00000000..7846bbb2 --- /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 242ebc5c..14ca195e 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 f5abc581..5cb1b960 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 00000000..b2d8a43d --- /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 d9c05f7f..250e47f2 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) => {