Creating a simple router

To get a feeling for how routing works with Redux (and React), we are going to start by manually implementing a simple router for our application. To be able to implement routing, we first need to split our application into separate pages: the main page and the about page.

Our simple router will work as follows:

• Our Redux store gets a new route sub-state, which contains the name of the current page as a string.
• A Router component decides which page to show based on the route sub-state.
• A Navigation component provides links that trigger a navigate(pageName) action creator, which changes the state to the new page.
• When the state changes, the Router component gets the new state as a property, re-renders and shows the new page.

You can use the code in chapter8_2.zip as a starting point for this section.

Defining the action types and action creator

We start by defining a NAVIGATE action and navigate(pageName) action creator. Dispatching this action will change the current page...