diff --git a/examples/with-redux-thunk/README.md b/examples/with-redux-thunk/README.md
index c8533d44a739b..80f4282727684 100644
--- a/examples/with-redux-thunk/README.md
+++ b/examples/with-redux-thunk/README.md
@@ -45,15 +45,20 @@ Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm
## Notes
-In the first example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color (black) than the client one (grey).
+The Redux `Provider` is implemented in `pages/_app.js`. The `MyApp` component is wrapped in a `withReduxStore` function, the redux `store` will be initialized in the function and then passed down to `MyApp` as `this.props.initialReduxState`, which will then be utilized by the `Provider` component.
-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.
+Every initial server-side request will utilize a new `store`. However, every `Router` or `Link` action will persist the same `store` as a user navigates through the `pages`. To demonstrate this example, we can navigate back and forth to `/show-redux-state` using the provided `Link`s. However, if we navigate directly to `/show-redux-state` (or refresh the page), this will cause a server-side render, which will then utilize a new store.
-`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`
+In the `clock` component, we are going to display a digital clock that updates every second. The first render is happening on the server and then the browser will take over. To illustrate this, the server rendered clock will initially have a black background; then, once the component has been mounted in the browser, it changes from black to a grey background.
-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.
+In the `counter` component, we are going to display a user-interactive counter that can be increased or decreased when the provided buttons are pressed.
-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
+This example includes two different ways to access the `store` or to `dispatch` actions:
-For simplicity and readability, Reducers, Actions, and Store creators are all in the same file: `store.js`
+1.) `pages/index.js` will utilize `connect` from `react-redux` to `dispatch` the `startClock` redux action once the component has been mounted in the browser.
+
+2.) `components/counter.js` and `components/examples.js` have access to the redux store using `useSelector` and can dispatch actions using `useDispatch` from `react-redux@^7.1.0`
+
+You can either use the `connect` function to access redux state and/or dispatch actions or use the hook variations: `useSelector` and `useDispatch`. It's up to you.
+
+This example also includes hot-reloading when one of the `reducers` has changed. However, there is one caveat with this implementation: If you're using the `Redux DevTools` browser extension, then all previously recorded actions will be recreated when a reducer has changed (in other words, if you increment the counter by 1 using the `+1` button, and then change the increment action to add 10 in the reducer, Redux DevTools will playback all actions and adjust the counter state by 10 to reflect the reducer change). Therefore, to avoid this issue, the store has been set up to reset back initial state upon a reducer change. If you wish to persist redux state regardless (or you don't have the extension installed), then in `store.js` change (line 19) `store.replaceReducer(createNextReducer(initialState))` to `store.replaceReducer(createNextReducer)`.
diff --git a/examples/with-redux-thunk/actions.js b/examples/with-redux-thunk/actions.js
new file mode 100644
index 0000000000000..a0ab26810c3dd
--- /dev/null
+++ b/examples/with-redux-thunk/actions.js
@@ -0,0 +1,23 @@
+import * as types from './types'
+
+// INITIALIZES CLOCK ON SERVER
+export const serverRenderClock = isServer => dispatch =>
+ dispatch({
+ type: types.TICK,
+ payload: { light: !isServer, ts: Date.now() },
+ })
+
+// INITIALIZES CLOCK ON CLIENT
+export const startClock = () => dispatch =>
+ setInterval(() => {
+ dispatch({ type: types.TICK, payload: { light: true, ts: Date.now() } })
+ }, 1000)
+
+// INCREMENT COUNTER BY 1
+export const incrementCount = () => ({ type: types.INCREMENT })
+
+// DECREMENT COUNTER BY 1
+export const decrementCount = () => ({ type: types.DECREMENT })
+
+// RESET COUNTER
+export const resetCount = () => ({ type: types.RESET })
diff --git a/examples/with-redux-thunk/components/clock.js b/examples/with-redux-thunk/components/clock.js
index 9fb286e174819..6bdd9221010c3 100644
--- a/examples/with-redux-thunk/components/clock.js
+++ b/examples/with-redux-thunk/components/clock.js
@@ -1,25 +1,27 @@
-export default ({ lastUpdate, light }) => {
- return (
-
- {format(new Date(lastUpdate))}
-
-
- )
-}
+const pad = n => (n < 10 ? `0${n}` : n)
const format = t =>
`${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`
-const pad = n => (n < 10 ? `0${n}` : n)
+const Clock = ({ lastUpdate, light }) => (
+