From 9d2cfb56d1aa765bb1a62eb3b0c9d8d2b638c3fc Mon Sep 17 00:00:00 2001
From: TodorTotev <51530311+TodorTotev@users.noreply.github.com>
Date: Mon, 25 May 2020 19:55:33 +0300
Subject: [PATCH] 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.
---
 examples/with-redux-thunk/actions.js     |  4 +-
 examples/with-redux-thunk/package.json   |  4 +-
 examples/with-redux-thunk/pages/index.js | 51 +++++++++++-------------
 3 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/examples/with-redux-thunk/actions.js b/examples/with-redux-thunk/actions.js
index 081ec97e1e10..8ea0888083b0 100644
--- a/examples/with-redux-thunk/actions.js
+++ b/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
diff --git a/examples/with-redux-thunk/package.json b/examples/with-redux-thunk/package.json
index 3e4eff1929c9..9488355a8115 100644
--- a/examples/with-redux-thunk/package.json
+++ b/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"
diff --git a/examples/with-redux-thunk/pages/index.js b/examples/with-redux-thunk/pages/index.js
index befb7ae3b067..ee710a781c87 100644
--- a/examples/with-redux-thunk/pages/index.js
+++ b/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