-
-
Notifications
You must be signed in to change notification settings - Fork 265
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Redux Saga example - Proper support of `getStaticProps` and `getServerSideProps` - Removed `isServer`
- Loading branch information
1 parent
0d65503
commit 69ffdce
Showing
21 changed files
with
431 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
module.exports = { | ||
server: { | ||
command: 'yarn serve', | ||
debug: true, | ||
port: 5000, | ||
launchTimeout: 30000, | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
const config = require('next-redux-wrapper-configs/jest.config'); | ||
module.exports = { | ||
...config, | ||
preset: 'jest-puppeteer', | ||
coveragePathIgnorePatterns: config.coveragePathIgnorePatterns.concat('./jest-puppeteer.config.js'), | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
/// <reference types="next" /> | ||
/// <reference types="next/types/global" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
{ | ||
"name": "next-redux-wrapper-demo-saga", | ||
"private": true, | ||
"version": "6.0.0", | ||
"description": "Demo of redux wrapper for Next.js", | ||
"scripts": { | ||
"clean": "rimraf .next coverage", | ||
"test": "jest", | ||
"start": "next --port=5000", | ||
"build": "next build", | ||
"serve": "next start --port=5000" | ||
}, | ||
"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-saga": "1.1.3" | ||
}, | ||
"devDependencies": { | ||
"@types/expect-puppeteer": "4.4.0", | ||
"@types/jest": "25.1.4", | ||
"@types/jest-environment-puppeteer": "4.3.1", | ||
"@types/next-redux-saga": "3.0.2", | ||
"@types/puppeteer": "2.0.1", | ||
"@types/react": "16.9.31", | ||
"@types/react-dom": "16.9.6", | ||
"@types/react-redux": "7.1.7", | ||
"@types/webpack-env": "1.15.1", | ||
"jest": "25.2.4", | ||
"jest-puppeteer": "4.4.0", | ||
"next": "9.3.4", | ||
"next-redux-wrapper-configs": "^6.0.0", | ||
"puppeteer": "2.1.1", | ||
"rimraf": "3.0.2", | ||
"ts-jest": "25.3.0", | ||
"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" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import {createStore, applyMiddleware, Store} from 'redux'; | ||
import {MakeStore, createWrapper, Context} from 'next-redux-wrapper'; | ||
import createSagaMiddleware, {Task} from 'redux-saga'; | ||
import reducer, {State} from './reducer'; | ||
import rootSaga from './saga'; | ||
|
||
export interface SagaStore extends Store { | ||
sagaTask: Task; | ||
} | ||
|
||
export 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)); | ||
|
||
// 3: Run your sagas on server | ||
(store as SagaStore).sagaTask = sagaMiddleware.run(rootSaga); | ||
|
||
// 4: now return the store: | ||
return store; | ||
}; | ||
|
||
export const wrapper = createWrapper<State>(makeStore, {debug: true}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import React from 'react'; | ||
import App, {AppInitialProps} from 'next/app'; | ||
import {END} from 'redux-saga'; | ||
import {SagaStore, wrapper} from '../components/store'; | ||
|
||
class WrappedApp extends App<AppInitialProps> { | ||
public static getInitialProps = wrapper.getInitialAppProps<Promise<AppInitialProps>>(async ({Component, ctx}) => { | ||
// 1. Wait for all page actions to dispatch | ||
const pageProps = { | ||
...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}), | ||
}; | ||
|
||
// 2. Stop the saga if on server | ||
if (ctx.req) { | ||
console.log('Saga is executing on server, we will wait'); | ||
ctx.store.dispatch(END); | ||
await (ctx.store as SagaStore).sagaTask.toPromise(); | ||
} | ||
|
||
// 3. Return props | ||
return { | ||
pageProps, | ||
}; | ||
}); | ||
|
||
public render() { | ||
const {Component, pageProps} = this.props; | ||
return <Component {...pageProps} />; | ||
} | ||
} | ||
|
||
export default wrapper.withRedux(WrappedApp); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import React from 'react'; | ||
import {useSelector} from 'react-redux'; | ||
import {NextPage} from 'next'; | ||
import {State} from '../components/reducer'; | ||
import {SAGA_ACTION} from '../components/saga'; | ||
|
||
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> | ||
); | ||
}; | ||
|
||
Page.getInitialProps = ({store}) => { | ||
store.dispatch({type: SAGA_ACTION}); | ||
return {custom: 'custom'}; | ||
}; | ||
|
||
export default Page; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
] | ||
} |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.