From f3ea363df7a3f445dcef63355278aba2a1f9e40b 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 081ec97e1e..8ea0888083 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 3e4eff1929..9488355a81 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 befb7ae3b0..ee710a781c 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
-- 
GitLab