Updated with-redux-thunk example using useSelector and useDispatch (vercel#8396)

* use useSelector and useDispatch

* update README

* fix space and trailing comma

Author: matamatanot

examples/with-redux-thunk/README.md

@@ -47,10 +47,11 @@ In the first example we are going to display a digital clock that updates every
 
 The Redux `Provider` is implemented in `pages/_app.js`. Since the `MyApp` component is wrapped in `withReduxStore` the redux store will be automatically initialized and provided to `MyApp`, which in turn passes it off to `react-redux`'s `Provider` component.
 
-All pages have access to the redux store using `connect` from `react-redux`.
+`index.js` have access to the redux store using `connect` from `react-redux`.
+`counter.js` and `examples.js` have access to the redux store using `useSelector` and `useDispatch` from `react-redux@^7.1.0`
 
 On the server side every request initializes a new store, because otherwise different user data can be mixed up. On the client side the same store is used, even between page changes.
 
-The example under `components/counter.js`, shows a simple incremental counter implementing a common Redux pattern of mapping state to props. Again, the first render is happening in the server and instead of starting the count at 0, it will dispatch an action in redux that starts the count at 1. This continues to highlight how each navigation triggers a server render first and then a client render when switching pages on the client side
+The example under `components/counter.js`, shows a simple incremental counter implementing a common Redux pattern. Again, the first render is happening in the server and instead of starting the count at 0, it will dispatch an action in redux that starts the count at 1. This continues to highlight how each navigation triggers a server render first and then a client render when switching pages on the client side
 
 For simplicity and readability, Reducers, Actions, and Store creators are all in the same file: `store.js`

examples/with-redux-thunk/components/counter.js

@@ -1,41 +1,19 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
 import { incrementCount, decrementCount, resetCount } from '../store'
 
-class Counter extends Component {
-  increment = () => {
-    const { dispatch } = this.props
-    dispatch(incrementCount())
-  }
+export default () => {
+  const count = useSelector(state => state.count)
+  const dispatch = useDispatch()
 
-  decrement = () => {
-    const { dispatch } = this.props
-    dispatch(decrementCount())
-  }
-
-  reset = () => {
-    const { dispatch } = this.props
-    dispatch(resetCount())
-  }
-
-  render () {
-    const { count } = this.props
-    return (
-      <div>
-        <h1>
-          Count: <span>{count}</span>
-        </h1>
-        <button onClick={this.increment}>+1</button>
-        <button onClick={this.decrement}>-1</button>
-        <button onClick={this.reset}>Reset</button>
-      </div>
-    )
-  }
+  return (
+    <div>
+      <h1>
+        Count: <span>{count}</span>
+      </h1>
+      <button onClick={() => dispatch(incrementCount())}>+1</button>
+      <button onClick={() => dispatch(decrementCount())}>-1</button>
+      <button onClick={() => dispatch(resetCount())}>Reset</button>
+    </div>
+  )
 }
-
-function mapStateToProps (state) {
-  const { count } = state
-  return { count }
-}
-
-export default connect(mapStateToProps)(Counter)

examples/with-redux-thunk/components/examples.js

@@ -1,19 +1,15 @@
-import { connect } from 'react-redux'
+import { useSelector } from 'react-redux'
 import Clock from './clock'
 import Counter from './counter'
 
-function Examples ({ lastUpdate, light }) {
+export default () => {
+  const lastUpdate = useSelector(state => state.lastUpdate)
+  const light = useSelector(state => state.light)
+
   return (
     <div>
       <Clock lastUpdate={lastUpdate} light={light} />
       <Counter />
     </div>
   )
 }
-
-function mapStateToProps (state) {
-  const { lastUpdate, light } = state
-  return { lastUpdate, light }
-}
-
-export default connect(mapStateToProps)(Examples)

examples/with-redux-thunk/package.json

@@ -8,12 +8,12 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^16.7.0",
-    "redux-devtools-extension": "^2.13.2",
-    "react-dom": "^16.7.0",
-    "react-redux": "^5.0.1",
-    "redux": "^3.6.0",
-    "redux-thunk": "^2.1.0"
+    "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-thunk": "^2.3.0"
   },
   "license": "ISC"
 }

examples/with-redux-thunk/store.js

@@ -51,16 +51,16 @@ export const startClock = dispatch => {
   }, 1000)
 }
 
-export const incrementCount = () => dispatch => {
-  return dispatch({ type: actionTypes.INCREMENT })
+export const incrementCount = () => {
+  return { type: actionTypes.INCREMENT }
 }
 
-export const decrementCount = () => dispatch => {
-  return dispatch({ type: actionTypes.DECREMENT })
+export const decrementCount = () => {
+  return { type: actionTypes.DECREMENT }
 }
 
-export const resetCount = () => dispatch => {
-  return dispatch({ type: actionTypes.RESET })
+export const resetCount = () => {
+  return { type: actionTypes.RESET }
 }
 
 export function initializeStore (initialState = exampleInitialState) {