The App component is the outer shell of the book manager application. You can think of App as the container for every other component that gets rendered. It is responsible for rendering the left-hand side navigation, and for defining the routes of the application so that the appropriate components are mounted and unmounted as the user moves around. Here's what the implementation of App looks like:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
  BrowserRouter as Router,
  Route,
  NavLink
} from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import Home from './Home';
import NewBook from './NewBook';
import BookDetails from './BookDetails';

class App extends Component {
  render() {
    const { title } = this.props;

    return (
      <Router>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">{title}</h1>
          </header>
          <section className="Layout">
            <nav>
              <NavLink
                exact
                to="/"
                activeStyle={{ fontWeight: 'bold' }}
              >
                Home
              </NavLink>
              <NavLink to="/new" activeStyle={{ fontWeight: 'bold' }}>
                New Book
              </NavLink>
            </nav>
            <section>
              <Route exact path="/" component={Home} />
              <Route exact path="/new" component={NewBook} />
              <Route
                exact
                path="/book/:title"
                component={BookDetails}
              />
            </section>
          </section>
        </div>
      </Router>
    );
  }
}

const mapState = state => state.app;
const mapDispatch = dispatch => ({});
export default connect(mapState, mapDispatch)(App);

The connect() function from the react-redux package is used to connect the App component to the Redux store (where your application state lives). The mapState() and mapDispatch() functions add props to the App component—state values and action dispatcher functions respectively. So far, the App component has only one state value and no action dispatcher functions.

For a more in-depth look at how to connect React components to Redux stores, take a look at this page: https://redux.js.org/basics/usage-with-react.

Let's take a look at the app() reducer function next:

const initialState = {
  title: 'Book Manager'
};

const app = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default app;

There isn't much to the state used by App except a title. In fact, this title never changes. The reducer function simply returns the state that's passed to it. You don't actually need a switch statement here because there are no actions to handle. However, the title state is likely something that will change based on actions—you just don't know yet. It's never a bad idea to set up reducer functions like this so that you can connect a component to the Redux store, and so that once you identify an action that should cause a state change, you have a reducer function ready to handle it.