Added next-redux-wrapper to example (#1196)

* Added next-redux-wrapper to example

* Docs, renamed withRedux

examples/with-redux/README.md

@@ -31,7 +31,11 @@ In this example we are going to display a digital clock that updates every secon
 
 ![](http://i.imgur.com/JCxtWSj.gif)
 
-Our page is located at `pages/index.js` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getInitialProps`, initializing the redux store and dispatching the required actions until we are ready to return the initial state to be rendered. The root component for the render method is the `react-redux Provider` that allows us to send the store down to children components so they can access to the state when required.
+Our page is located at `pages/index.js` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getInitialProps`, initializing the redux store and dispatching the required actions until we are ready to return the initial state to be rendered. Since the component is wrapped with `next-react-wrapper`, the component is automatically connected to Redux and wrapped with `react-redux Provider`, that allows us to access redux state immediately and send the store down to children components so they can access to the state when required.
+
+For safety it is recommended to wrap all pages, no matter if they use Redux or not, so that you should not care about it anymore in all child components.
+
+`withRedux` function accepts `makeStore` as first argument, all other arguments are internally passed to `react-redux connect()` function. `makeStore` function will receive initialState as one argument and should return a new instance of redux store each time when called, no memoization needed here. See the [full example](https://github.com/kirill-konshin/next-redux-wrapper#usage) in the Next Redux Wrapper repository.
 
 To pass the initial state from the server to the client we pass it as a prop called `initialState` so then it's available when the client takes over.
 

examples/with-redux/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "next": "^2.0.0-beta",
+    "next-redux-wrapper": "^1.0.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-redux": "^5.0.1",

examples/with-redux/pages/index.js

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

examples/with-redux/pages/other.js

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

examples/with-redux/store.js

@@ -12,15 +12,6 @@ export const startClock = () => dispatch => {
   return setInterval(() => dispatch({ type: 'TICK', light: true, ts: Date.now() }), 800)
 }
 
-let store = null
+export const initStore = (initialState) => {
-
-export const initStore = (reducer, initialState, isServer) => {
-  if (isServer && typeof window === 'undefined') {
   return createStore(reducer, initialState, applyMiddleware(thunkMiddleware))
-  } else {
-    if (!store) {
-      store = createStore(reducer, initialState, applyMiddleware(thunkMiddleware))
-    }
-    return store
-  }
 }