Update redux example using hooks api (vercel#8410)

* Update redux example with hooks api

* Update react and react-redux package

* Apply standard style

Author: Naturalclar

examples/with-redux/README.md

@@ -47,7 +47,8 @@ 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.
 

examples/with-redux/components/counter.js

@@ -1,47 +1,37 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-import { bindActionCreators } from 'redux'
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
 import { incrementCount, decrementCount, resetCount } from '../store'
 
-class Counter extends Component {
-  increment = () => {
-    const { incrementCount } = this.props
-    incrementCount()
-  }
+const countSelector = state => state.count
 
-  decrement = () => {
-    const { decrementCount } = this.props
-    decrementCount()
+const useCounter = () => {
+  const dispatch = useDispatch()
+  const increment = () => {
+    dispatch(incrementCount())
   }
-
-  reset = () => {
-    const { resetCount } = this.props
-    resetCount()
+  const decrement = () => {
+    dispatch(decrementCount())
   }
-
-  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>
-    )
+  const reset = () => {
+    dispatch(resetCount())
   }
+
+  return { increment, decrement, reset }
 }
 
-function mapStateToProps (state) {
-  const { count } = state
-  return { count }
+function Counter () {
+  const count = useSelector(countSelector)
+  const { increment, decrement, reset } = useCounter()
+  return (
+    <div>
+      <h1>
+        Count: <span>{count}</span>
+      </h1>
+      <button onClick={increment}>+1</button>
+      <button onClick={decrement}>-1</button>
+      <button onClick={reset}>Reset</button>
+    </div>
+  )
 }
-const mapDispatchToProps = dispatch =>
-  bindActionCreators({ incrementCount, decrementCount, resetCount }, dispatch)
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Counter)
+export default Counter

examples/with-redux/components/examples.js

@@ -1,8 +1,14 @@
-import { connect } from 'react-redux'
+import { useSelector, shallowEqual } from 'react-redux'
 import Clock from './clock'
 import Counter from './counter'
 
-function Examples ({ lastUpdate, light }) {
+const clockSelector = state => ({
+  lastUpdate: state.lastUpdate,
+  light: state.light
+})
+
+function Examples () {
+  const { lastUpdate, light } = useSelector(clockSelector, shallowEqual)
   return (
     <div>
       <Clock lastUpdate={lastUpdate} light={light} />
@@ -11,9 +17,4 @@ function Examples ({ lastUpdate, light }) {
   )
 }
 
-function mapStateToProps (state) {
-  const { lastUpdate, light } = state
-  return { lastUpdate, light }
-}
-
-export default connect(mapStateToProps)(Examples)
+export default Examples

examples/with-redux/package.json

@@ -8,10 +8,10 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^16.7.0",
+    "react": "^16.9.0",
     "redux-devtools-extension": "^2.13.2",
-    "react-dom": "^16.7.0",
-    "react-redux": "^5.0.1",
+    "react-dom": "^16.9.0",
+    "react-redux": "^7.1.0",
     "redux": "^3.6.0"
   },
   "license": "ISC"