Merge pull request #14 from HaNdTriX/master

Updated redux example by @HaNdTriX

components/clock-store.js

@@ -1,26 +1,17 @@
-/* global window */
 import {createStore, applyMiddleware} from 'redux'
 import thunkMiddleware from 'redux-thunk'
 
-export const reducer = (state = {lastUpdate: 0, light: false}, action) => {
+export const reducer = (state = { lastUpdate: 0, light: false }, action) => {
   switch (action.type) {
-    case 'TICK': return {lastUpdate: action.ts, light: Boolean(action.light)}
+    case 'TICK': return { lastUpdate: action.ts, light: !!action.light }
     default: return state
   }
 }
 
 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) => {
-  if (isServer && typeof window === 'undefined') {
-    return createStore(reducer, initialState, applyMiddleware(thunkMiddleware))
-  }
-
-  if (!window.store) {
-    window.store = createStore(reducer, initialState, applyMiddleware(thunkMiddleware))
-  }
-
-  return window.store
+export const initStore = (initialState) => {
+  return createStore(reducer, initialState, applyMiddleware(thunkMiddleware))
 }

components/clock.js

@@ -1,22 +1,23 @@
-import React from 'react'
-import {connect} from 'react-redux'
-import {style, merge} from 'next/css'
+const format = t => `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`
 
 const pad = n => n < 10 ? `0${n}` : n
 
-const format = t => `${pad(t.getHours())}:${pad(t.getMinutes())}:${pad(t.getSeconds())}`
-
-const styles = style({
-  padding: '15px',
-  display: 'inline-block',
-  color: '#82FA58',
-  font: '50px menlo, monaco, monospace'
-})
-
-export default connect(state => state)(({lastUpdate, light}) => {
+export default ({ lastUpdate, light }) => {
   return (
-    <div className={merge(styles, style({backgroundColor: light ? '#999' : '#000'}))}>
+    <div className={light ? 'light' : ''}>
       {format(new Date(lastUpdate))}
+      <style jsx>{`
+        div {
+          padding: 15px;
+          display: inline-block;
+          color: #82FA58;
+          font: 50px menlo, monaco, monospace;
+          background-color: #000;
+        }
+        .light {
+          background-color: #999;
+        }
+      `}</style>
     </div>
   )
-})
+}

package.json

@@ -15,6 +15,7 @@
     "isomorphic-fetch": "^2.2.1",
     "lusca": "^1.4.1",
     "next": "^2.0.0-beta.23",
+    "next-redux-wrapper": "^1.0.0",
     "node-sass": "^4.5.0",
     "nodemailer": "^2.7.0",
     "now-logs": "0.0.7",

pages/clock.js

@@ -5,49 +5,43 @@
  * The clock demo is comprised of
  * - pages/clock.js
  * - components/clock.js
- * - lib/clock-store.js
+ * - components/clock-store.js
+ * - next-redux-wrapper
  */
 import React from 'react'
-import {Provider} from 'react-redux'
-import {reducer, initStore, startClock} from '../components/clock-store'
+import withRedux from 'next-redux-wrapper'
+import { initStore, startClock } from '../components/clock-store'
 import Clock from '../components/clock'
 
-export default class Counter extends React.Component {
+class Counter extends React.Component {
 
   // propTypes() is checked by 'xo' linter
-  static propTypes() {
+  static propTypes () {
     return {
-      initialState: React.PropTypes.object.isRequired,
       isServer: React.PropTypes.boolean.isRequired
     }
   }
 
-  static getInitialProps({req}) {
-    const isServer = Boolean(req)
-    const store = initStore(reducer, null, isServer)
-    store.dispatch({type: 'TICK', ts: Date.now()})
-    return {initialState: store.getState(), isServer}
+  static getInitialProps ({ store, isServer }) {
+    store.dispatch({ type: 'TICK', light: !isServer, ts: Date.now() })
+    return { isServer }
   }
 
-  constructor(props) {
-    super(props)
-    this.store = initStore(reducer, props.initialState, props.isServer)
+  componentDidMount () {
+    this.timer = this.props.dispatch(startClock())
   }
 
-  componentDidMount() {
-    this.timer = this.store.dispatch(startClock())
-  }
-
-  componentWillUnmount() {
+  componentWillUnmount () {
     clearInterval(this.timer)
   }
 
-  render() {
+  render () {
+    const { lastUpdate, light } = this.props
     return (
-      <Provider store={this.store}>
-        <Clock/>
-      </Provider>
+      <Clock lastUpdate={lastUpdate} light={light} />
     )
   }
 
 }
+
+export default withRedux(initStore, state => state)(Counter)