The only component that still needs to be connected now, is the App component. Here, we are going to inject the fetchTodos action creator, and update the component so that it uses the connected versions of all the other components.

Let's connect the App component now:

1. Edit src/components/App.js, and adjust the following import statements:

import ConnectedAddTodo from '../containers/ConnectedAddTodo'
import ConnectedTodoList from '../containers/ConnectedTodoList'
import ConnectedTodoFilter from '../containers/ConnectedTodoFilter'

2. Also, adjust the following components that are returned from the function:

            return (
                <div style={{ width: 400 }}>
                    <Header />
                    <ConnectedAddTodo />
                    <hr />
                    <ConnectedTodoList />
                    <hr />
                    <ConnectedTodoFilter />
                </div>
            )

3. Now, we can create the connected component. Create a new src/containers/ConnectedApp.js file.
4. In this newly created file, we import the connect function from react-redux, and the bindActionCreators function from redux:

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

5. Next, we import the fetchTodos action creator, and the App component:

import { fetchTodos } from '../actions'
import App from '../components/App'

6. We already deal with the various parts of our state in other components, so there is no need to inject any state into our App component:

function mapStateToProps (state) {
    return {}
}

7. Then, we bind and return the fetchTodos action creator:

function mapDispatchToProps (dispatch) {
    return bindActionCreators({ fetchTodos }, dispatch)
}

8. Finally, we connect the App component and export it:

export default connect(mapStateToProps, mapDispatchToProps)(App)

Now, our App component is successfully connected to the Redux store.