Fix async in getServerSideProps

Fix #235
Fix #223

packages/demo-page/src/pages/index.tsx

@@ -26,9 +26,10 @@ const Page: NextPage<ConnectedPageProps> = ({custom}) => {
     );
 };
 
-export const getServerSideProps = wrapper.getServerSideProps(({store, req}) => {
+export const getServerSideProps = wrapper.getServerSideProps(async ({store, req}) => {
     console.log('2. Page.getServerSideProps uses the store to dispatch things');
     store.dispatch({type: 'PAGE', payload: 'was set in index page ' + req.url});
+    await new Promise(res => setTimeout(res, 1000));
     return {props: {custom: 'custom'}};
 });
 

packages/demo-page/src/pages/other.tsx

@@ -5,7 +5,7 @@ import {useSelector, useDispatch} from 'react-redux';
 import {State} from '../components/reducer';
 import {wrapper} from '../components/store';
 
-export const getStaticProps = wrapper.getStaticProps(({store, previewData}) => {
+export const getStaticProps = wrapper.getStaticProps(async ({store, previewData}) => {
     console.log('2. Page.getStaticProps uses the store to dispatch things');
     store.dispatch({type: 'PAGE', payload: 'was set in other page ' + JSON.stringify({previewData})});
 });

packages/demo-page/src/pages/other2.tsx

@@ -5,7 +5,7 @@ import {useSelector, useDispatch} from 'react-redux';
 import {State} from '../components/reducer';
 import {wrapper} from '../components/store';
 
-export const getStaticProps = wrapper.getStaticProps(({store, previewData}) => {
+export const getStaticProps = wrapper.getStaticProps(async ({store, previewData}) => {
     console.log('2. Page.getStaticProps uses the store to dispatch things');
     store.dispatch({type: 'PAGE', payload: 'was set in other (SECOND) page ' + JSON.stringify({previewData})});
 });

packages/demo-saga-page/jest-puppeteer.config.js

@@ -0,0 +1,2 @@
+module.exports = require('next-redux-wrapper-configs/jest-puppeteer.config');
+module.exports.server.port = 5050;

packages/demo-saga-page/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('next-redux-wrapper-configs/jest.config.puppeteer');

packages/demo-saga-page/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

packages/demo-saga-page/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "next-redux-wrapper-demo-saga-page",
+  "private": true,
+  "version": "6.0.0",
+  "description": "Demo of redux wrapper for Next.js",
+  "scripts": {
+    "clean": "rimraf .next coverage",
+    "test": "jest",
+    "start": "next --port=5050",
+    "build": "next build",
+    "serve": "next start --port=5050"
+  },
+  "dependencies": {
+    "jsondiffpatch": "0.4.1",
+    "next-redux-wrapper": "^6.0.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-redux": "7.2.0",
+    "redux": "4.0.5",
+    "redux-logger": "3.0.6",
+    "redux-saga": "1.1.3"
+  },
+  "devDependencies": {
+    "@types/expect-puppeteer": "4.4.1",
+    "@types/jest": "25.2.1",
+    "@types/jest-environment-puppeteer": "4.3.1",
+    "@types/next-redux-saga": "3.0.2",
+    "@types/puppeteer": "2.0.1",
+    "@types/react": "16.9.35",
+    "@types/react-dom": "16.9.8",
+    "@types/react-redux": "7.1.8",
+    "@types/redux-logger": "3.0.7",
+    "@types/webpack-env": "1.15.2",
+    "jest": "26.0.1",
+    "jest-puppeteer": "4.4.0",
+    "next": "9.4.0",
+    "next-redux-wrapper-configs": "^6.0.0",
+    "puppeteer": "3.0.4",
+    "rimraf": "3.0.2",
+    "ts-jest": "25.5.1",
+    "typescript": "3.8.3"
+  },
+  "author": "Kirill Konshin",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/kirill-konshin/next-redux-wrapper.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kirill-konshin/next-redux-wrapper/issues"
+  },
+  "homepage": "https://github.com/kirill-konshin/next-redux-wrapper",
+  "license": "MIT"
+}

packages/demo-saga-page/src/components/reducer.tsx

@@ -0,0 +1,22 @@
+import {AnyAction} from 'redux';
+import {HYDRATE} from 'next-redux-wrapper';
+import {SAGA_ACTION_SUCCESS} from './saga';
+
+export interface State {
+    page: string;
+}
+
+const initialState: State = {page: ''};
+
+function rootReducer(state = initialState, action: AnyAction) {
+    switch (action.type) {
+        case HYDRATE:
+            return {...state, ...action.payload};
+        case SAGA_ACTION_SUCCESS:
+            return {...state, page: action.data};
+        default:
+            return state;
+    }
+}
+
+export default rootReducer;

packages/demo-saga-page/src/components/saga.tsx

@@ -0,0 +1,18 @@
+import {delay, put, takeEvery} from 'redux-saga/effects';
+
+export const SAGA_ACTION = 'SAGA_ACTION';
+export const SAGA_ACTION_SUCCESS = `${SAGA_ACTION}_SUCCESS`;
+
+function* sagaAction() {
+    yield delay(100);
+    yield put({
+        type: SAGA_ACTION_SUCCESS,
+        data: 'async text',
+    });
+}
+
+function* rootSaga() {
+    yield takeEvery(SAGA_ACTION, sagaAction);
+}
+
+export default rootSaga;

packages/demo-saga-page/src/components/store.tsx

@@ -0,0 +1,26 @@
+import {createStore, applyMiddleware, Store} from 'redux';
+import logger from 'redux-logger';
+import createSagaMiddleware, {Task} from 'redux-saga';
+import {MakeStore, Context, createWrapper} from 'next-redux-wrapper';
+import reducer, {State} from './reducer';
+import rootSaga from './saga';
+
+export interface SagaStore extends Store {
+    sagaTask: Task;
+}
+
+const makeStore: MakeStore<State> = (context: Context) => {
+    // 1: Create the middleware
+    const sagaMiddleware = createSagaMiddleware();
+
+    // 2: Add an extra parameter for applying middleware:
+    const store = createStore(reducer, applyMiddleware(sagaMiddleware, logger));
+
+    // 3: Run your sagas on server
+    (store as SagaStore).sagaTask = sagaMiddleware.run(rootSaga);
+
+    // 4: now return the store:
+    return store;
+};
+
+export const wrapper = createWrapper(makeStore);

packages/demo-saga-page/src/pages/_app.tsx

@@ -0,0 +1,7 @@
+import React, {FC} from 'react';
+import {AppProps} from 'next/app';
+import {wrapper} from '../components/store';
+
+const WrappedApp: FC<AppProps> = ({Component, pageProps}) => <Component {...pageProps} />;
+
+export default wrapper.withRedux(WrappedApp);

packages/demo-saga-page/src/pages/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {useSelector} from 'react-redux';
+import {NextPage} from 'next';
+import {END} from 'redux-saga';
+import {State} from '../components/reducer';
+import {SAGA_ACTION} from '../components/saga';
+import {SagaStore, wrapper} from '../components/store';
+
+export interface ConnectedPageProps {
+    custom: string;
+}
+
+// Page itself is not connected to Redux Store, it has to render Provider to allow child components to connect to Redux Store
+const Page: NextPage<ConnectedPageProps> = ({custom}: ConnectedPageProps) => {
+    const {page} = useSelector<State, State>(state => state);
+    return (
+        <div className="index">
+            <pre>{JSON.stringify({page, custom}, null, 2)}</pre>
+        </div>
+    );
+};
+
+export const getServerSideProps = wrapper.getServerSideProps(async ({store}) => {
+    store.dispatch({type: SAGA_ACTION});
+    store.dispatch(END);
+    await (store as SagaStore).sagaTask.toPromise();
+
+    return {props: {custom: 'custom'}};
+});
+
+export default Page;

packages/demo-saga-page/tests/index.spec.ts

@@ -0,0 +1,14 @@
+import config from '../jest-puppeteer.config';
+
+const openPage = (url = '/') => page.goto(`http://localhost:${config.server.port}${url}`);
+
+describe('Basic integration', () => {
+    it('shows the page', async () => {
+        await openPage();
+
+        await page.waitForSelector('div.index');
+
+        await expect(page).toMatch('"page": "async text"');
+        await expect(page).toMatch('"custom": "custom"');
+    });
+});

packages/demo-saga-page/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../configs/tsconfig.json",
+  "include": [
+    "tests",
+    "src/pages"
+  ],
+  "compilerOptions": {
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "module": "esnext",
+    "outDir": "lib",
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}

packages/wrapper/src/index.tsx

@@ -144,7 +144,9 @@ export const createWrapper = <S extends {} = any, A extends Action = AnyAction>(
 
     const getServerSideProps = <P extends {} = any>(
         callback: (context: GetServerSidePropsContext & {store: Store<S, A>}) => P | void,
-    ): GetServerSideProps<P> => getStaticProps<P>(callback as any) as any; // just not to repeat myself
+    ): GetServerSideProps<P> => async (context: any) => {
+        return await getStaticProps(callback as any)(context); // just not to repeat myself
+    };
 
     const withRedux = (Component: NextComponentType | App | any) => {
         const displayName = `withRedux(${Component.displayName || Component.name || 'Component'})`;