Refactor with redux thunk example (vercel#13336)

Related to [11014](vercel#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.

examples/with-redux-thunk/actions.js

@@ -1,10 +1,10 @@
 import * as types from './types'
 
 // INITIALIZES CLOCK ON SERVER
-export const serverRenderClock = (isServer) => (dispatch) =>
+export const serverRenderClock = () => (dispatch) =>
   dispatch({
     type: types.TICK,
-    payload: { light: !isServer, ts: Date.now() },
+    payload: { light: false, ts: Date.now() },
   })
 
 // INITIALIZES CLOCK ON CLIENT

examples/with-redux-thunk/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "with-redux",
+  "name": "with-redux-thunk",
   "version": "1.0.0",
   "scripts": {
     "dev": "next",
@@ -9,10 +9,10 @@
   "dependencies": {
     "next": "latest",
     "react": "^16.9.0",
-    "redux-devtools-extension": "^2.13.8",
     "react-dom": "^16.9.0",
     "react-redux": "^7.1.0",
     "redux": "^4.0.4",
+    "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0"
   },
   "license": "ISC"

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

@@ -1,38 +1,33 @@
-import { PureComponent } from 'react'
-import { connect } from 'react-redux'
+import { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
 import Link from 'next/link'
+import getStore from '../store'
 import { startClock, serverRenderClock } from '../actions'
 import Examples from '../components/examples'
 
-class Index extends PureComponent {
-  static getInitialProps({ store, req }) {
-    store.dispatch(serverRenderClock(!!req))
+const Index = () => {
+  const dispatch = useDispatch()
+  useEffect(() => {
+    dispatch(startClock())
+  }, [dispatch])
 
-    return {}
-  }
+  return (
+    <>
+      <Examples />
+      <Link href="/show-redux-state">
+        <a>Click to see current Redux State</a>
+      </Link>
+    </>
+  )
+}
 
-  componentDidMount() {
-    this.timer = this.props.startClock()
-  }
+export async function getStaticProps() {
+  const store = getStore()
+  store.dispatch(serverRenderClock())
 
-  componentWillUnmount() {
-    clearInterval(this.timer)
+  return {
+    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