Implementing generic undo/redo Redux

Before we implement generic undo/redo functionality, we will look at a simple Redux application that has a counter:

Counter application from chapter11_1.zip

Setting up the counter application

First, let's set up the counter application example:

1. Unzip the counter application example in chapter11_1.zip.
2. Then, run the following command to install all dependencies:

npm install

3. Afterward, we can start the application using the following command:

npm start

This will start the webpack-dev-server on http://localhost:8080.

4. Open http://localhost:8080/ in your browser, and you should see the application from the screenshot given in the preceding section.

Looking at the counter reducer

The counter is controlled by a counterReducer in src/reducers/counter.js:

import { INCREMENT, DECREMENT, RESET } from '../actionTypes'

export default function counterReducer (state = 0, action) {
  switch (action.type) {

Its logic is quite simple:

• On an INCREMENT action, increase the state by 1...