未验证 提交 f3ea363d 编写于 作者: T TodorTotev 提交者: GitHub

Refactor with redux thunk example (#13336)

Related to [11014](https://github.com/zeit/next.js/issues/11014)

1. I have changed the component from class to functional.
2. I have removed the getInitialProps and used getStaticProps instead.
3. I have removed the redundant connect to redux @ the index page, due to the fact that now we can dispatch the action with the required hook.

If you want me to change anything or you are not satisfied with any given change, I'm open to suggestions.
上级 cc4b0c7b
import * as types from './types' import * as types from './types'
// INITIALIZES CLOCK ON SERVER // INITIALIZES CLOCK ON SERVER
export const serverRenderClock = (isServer) => (dispatch) => export const serverRenderClock = () => (dispatch) =>
dispatch({ dispatch({
type: types.TICK, type: types.TICK,
payload: { light: !isServer, ts: Date.now() }, payload: { light: false, ts: Date.now() },
}) })
// INITIALIZES CLOCK ON CLIENT // INITIALIZES CLOCK ON CLIENT
......
{ {
"name": "with-redux", "name": "with-redux-thunk",
"version": "1.0.0", "version": "1.0.0",
"scripts": { "scripts": {
"dev": "next", "dev": "next",
...@@ -9,10 +9,10 @@ ...@@ -9,10 +9,10 @@
"dependencies": { "dependencies": {
"next": "latest", "next": "latest",
"react": "^16.9.0", "react": "^16.9.0",
"redux-devtools-extension": "^2.13.8",
"react-dom": "^16.9.0", "react-dom": "^16.9.0",
"react-redux": "^7.1.0", "react-redux": "^7.1.0",
"redux": "^4.0.4", "redux": "^4.0.4",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0" "redux-thunk": "^2.3.0"
}, },
"license": "ISC" "license": "ISC"
......
import { PureComponent } from 'react' import { useEffect } from 'react'
import { connect } from 'react-redux' import { useDispatch } from 'react-redux'
import Link from 'next/link' import Link from 'next/link'
import getStore from '../store'
import { startClock, serverRenderClock } from '../actions' import { startClock, serverRenderClock } from '../actions'
import Examples from '../components/examples' import Examples from '../components/examples'
class Index extends PureComponent { const Index = () => {
static getInitialProps({ store, req }) { const dispatch = useDispatch()
store.dispatch(serverRenderClock(!!req)) useEffect(() => {
dispatch(startClock())
}, [dispatch])
return {} return (
} <>
<Examples />
<Link href="/show-redux-state">
<a>Click to see current Redux State</a>
</Link>
</>
)
}
componentDidMount() { export async function getStaticProps() {
this.timer = this.props.startClock() const store = getStore()
} store.dispatch(serverRenderClock())
componentWillUnmount() { return {
clearInterval(this.timer) props: {},
} }
render() {
return (
<>
<Examples />
<Link href="/show-redux-state">
<a>Click to see current Redux State</a>
</Link>
</>
)
}
}
const mapDispatchToProps = {
startClock,
} }
export default connect(null, mapDispatchToProps)(Index) export default Index
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册