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.
