diff --git a/examples/with-redux-thunk/README.md b/examples/with-redux-thunk/README.md index 26fa13103bda2f812c1a0a1f9d2c76e6c3efc9ef..323aed9d44c48e7db213f64fb123a25627f64218 100644 --- a/examples/with-redux-thunk/README.md +++ b/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` diff --git a/examples/with-redux-thunk/components/counter.js b/examples/with-redux-thunk/components/counter.js index 568c4263d62e817bb29e1bbb09a2cb98e15754db..a85d2f23c3f317c97c4aff71bba6f43722d22261 100644 --- a/examples/with-redux-thunk/components/counter.js +++ b/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 ( -