From 4f59c951492b9553c5f5502ecda8194c7f28715f Mon Sep 17 00:00:00 2001 From: Gaston Fartek Date: Sun, 13 May 2018 12:26:17 -0400 Subject: [PATCH] updating with-redux-saga example (#4356) --- examples/with-redux-saga/package.json | 12 +++++----- examples/with-redux-saga/pages/_app.js | 31 +++++++++++++++++++++++++ examples/with-redux-saga/pages/index.js | 11 +++++---- examples/with-redux-saga/pages/other.js | 9 +++---- examples/with-redux-saga/store.js | 13 +++++------ 5 files changed, 54 insertions(+), 22 deletions(-) create mode 100644 examples/with-redux-saga/pages/_app.js diff --git a/examples/with-redux-saga/package.json b/examples/with-redux-saga/package.json index 223463939c..296088743c 100644 --- a/examples/with-redux-saga/package.json +++ b/examples/with-redux-saga/package.json @@ -10,14 +10,14 @@ "dependencies": { "es6-promise": "4.1.1", "isomorphic-unfetch": "2.0.0", - "next": "latest", - "next-redux-saga": "1.0.1", - "next-redux-wrapper": "1.2.0", + "next": "6.0.1", + "next-redux-saga": "3.0.0-beta.1", + "next-redux-wrapper": "2.0.0-beta.6", "react": "^16.0.0", "react-dom": "^16.0.0", - "react-redux": "5.0.5", - "redux": "3.7.2", - "redux-saga": "0.15.4" + "react-redux": "5.0.7", + "redux": "4.0.0", + "redux-saga": "0.16.0" }, "devDependencies": { "redux-devtools-extension": "2.13.2" diff --git a/examples/with-redux-saga/pages/_app.js b/examples/with-redux-saga/pages/_app.js new file mode 100644 index 0000000000..7d1001f1af --- /dev/null +++ b/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 ( + + + + + + ) + } +} + +export default withRedux(createStore)(withReduxSaga({ async: true })(MyApp)) diff --git a/examples/with-redux-saga/pages/index.js b/examples/with-redux-saga/pages/index.js index c9ac10cfe2..5a83eefa1b 100644 --- a/examples/with-redux-saga/pages/index.js +++ b/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}) { - store.dispatch(tickClock(isServer)) + static async getInitialProps (props) { + 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) diff --git a/examples/with-redux-saga/pages/other.js b/examples/with-redux-saga/pages/other.js index 134840939d..48f716fe3e 100644 --- a/examples/with-redux-saga/pages/other.js +++ b/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) diff --git a/examples/with-redux-saga/store.js b/examples/with-redux-saga/store.js index e8c7f7bcad..80ffdfdd0b 100644 --- a/examples/with-redux-saga/store.js +++ b/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) { - return withRedux(configureStore)(nextReduxSaga(BaseComponent)) -} +export default configureStore -- GitLab