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 ( -
-

- Count: {count} -

- - - -
- ) - } + return ( +
+

+ Count: {count} +

+ + + +
+ ) } - -function mapStateToProps (state) { - const { count } = state - return { count } -} - -export default connect(mapStateToProps)(Counter) diff --git a/examples/with-redux-thunk/components/examples.js b/examples/with-redux-thunk/components/examples.js index 1654de53921d36aff1da239f31db2c953e8ad1e1..4db5ac94dd4f6bbd701d45ce666c068d5a083368 100644 --- a/examples/with-redux-thunk/components/examples.js +++ b/examples/with-redux-thunk/components/examples.js @@ -1,8 +1,11 @@ -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 (
@@ -10,10 +13,3 @@ function Examples ({ lastUpdate, light }) {
) } - -function mapStateToProps (state) { - const { lastUpdate, light } = state - return { lastUpdate, light } -} - -export default connect(mapStateToProps)(Examples) diff --git a/examples/with-redux-thunk/package.json b/examples/with-redux-thunk/package.json index 099ba063c3c9dfa0e4c02c24f1093f8ec9f30b59..3e4eff1929c9140ad8b64e020c23a008c64ce767 100644 --- a/examples/with-redux-thunk/package.json +++ b/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" } diff --git a/examples/with-redux-thunk/store.js b/examples/with-redux-thunk/store.js index 1d94cd2678b614ce8d02f56453615668ee11e085..96818a5d0276c46bc840baf07a770f1b50197c04 100644 --- a/examples/with-redux-thunk/store.js +++ b/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) {