updating with-redux-saga example (#4356)

examples/with-redux-saga/package.json

@@ -10,14 +10,14 @@
   "dependencies": {
     "es6-promise": "4.1.1",
     "isomorphic-unfetch": "2.0.0",
-    "next": "latest",
+    "next": "6.0.1",
-    "next-redux-saga": "1.0.1",
+    "next-redux-saga": "3.0.0-beta.1",
-    "next-redux-wrapper": "1.2.0",
+    "next-redux-wrapper": "2.0.0-beta.6",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-redux": "5.0.5",
+    "react-redux": "5.0.7",
-    "redux": "3.7.2",
+    "redux": "4.0.0",
-    "redux-saga": "0.15.4"
+    "redux-saga": "0.16.0"
   },
   "devDependencies": {
     "redux-devtools-extension": "2.13.2"

examples/with-redux-saga/pages/_app.js

@@ -0,0 +1,31 @@
+import App, { Container } from 'next/app'
+import React from 'react'
+import { Provider } from 'react-redux'
+import withRedux from 'next-redux-wrapper'
+import createStore from '../store'
+import withReduxSaga from 'next-redux-saga'
+
+class MyApp extends App {
+  static async getInitialProps ({ Component, ctx }) {
+    let pageProps = {}
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps({ ctx })
+    }
+
+    return { pageProps }
+  }
+
+  render () {
+    const { Component, pageProps, store } = this.props
+    return (
+      <Container>
+        <Provider store={store}>
+          <Component {...pageProps} />
+        </Provider>
+      </Container>
+    )
+  }
+}
+
+export default withRedux(createStore)(withReduxSaga({ async: true })(MyApp))

examples/with-redux-saga/pages/index.js

@@ -1,13 +1,14 @@
 import React from 'react'
-
+import {connect} from 'react-redux'
 import {increment, loadData, startClock, tickClock} from '../actions'
-import {withReduxSaga} from '../store'
 import Page from '../components/page'
 
 class Counter extends React.Component {
-  static async getInitialProps ({store, isServer}) {
+  static async getInitialProps (props) {
-    store.dispatch(tickClock(isServer))
+    const { store } = props.ctx
+    store.dispatch(tickClock(props.isServer))
     store.dispatch(increment())
+
     if (!store.getState().placeholderData) {
       store.dispatch(loadData())
     }
@@ -22,4 +23,4 @@ class Counter extends React.Component {
   }
 }
 
-export default withReduxSaga(Counter)
+export default connect()(Counter)

examples/with-redux-saga/pages/other.js

@@ -1,13 +1,14 @@
 import React from 'react'
-
+import {connect} from 'react-redux'
 import {increment, startClock, tickClock} from '../actions'
-import {withReduxSaga} from '../store'
 import Page from '../components/page'
 
 class Counter extends React.Component {
-  static async getInitialProps ({store, isServer}) {
+  static async getInitialProps (props) {
+    const { store, isServer } = props.ctx
     store.dispatch(tickClock(isServer))
     store.dispatch(increment())
+    return { isServer }
   }
 
   componentDidMount () {
@@ -19,4 +20,4 @@ class Counter extends React.Component {
   }
 }
 
-export default withReduxSaga(Counter)
+export default connect()(Counter)

examples/with-redux-saga/store.js

@@ -1,8 +1,5 @@
 import {createStore, applyMiddleware} from 'redux'
-import withRedux from 'next-redux-wrapper'
-import nextReduxSaga from 'next-redux-saga'
 import createSagaMiddleware from 'redux-saga'
-
 import rootReducer, {exampleInitialState} from './reducer'
 import rootSaga from './saga'
 
@@ -23,10 +20,12 @@ export function configureStore (initialState = exampleInitialState) {
     bindMiddleware([sagaMiddleware])
   )
 
-  store.sagaTask = sagaMiddleware.run(rootSaga)
+  store.runSagaTask = () => {
+    store.sagaTask = sagaMiddleware.run(rootSaga)
+  }
+
+  store.runSagaTask()
   return store
 }
 
-export function withReduxSaga (BaseComponent) {
+export default configureStore
-  return withRedux(configureStore)(nextReduxSaga(BaseComponent))
-}