Next, we are going to update our App component so that it directly dispatches the fetchTodos action. Let's migrate the App component to Hooks now:

1. First delete the src/containers/ConnectedApp.js file.

2. Now, edit the src/components/App.js file and import the useDispatch Hook from react-redux:

import { useDispatch } from 'react-redux'

3. Additionally, import the fetchTodos action creator:

import { fetchTodos } from '../actions'

4. Now, we can remove the props from the function definition:

export default function App () {

5. Then, define the Dispatch Hook:

    const dispatch = useDispatch()

6. Finally, adjust the Effect Hook and call dispatch():

    useEffect(() => {
        dispatch(fetchTodos())
    }, [ dispatch ])

7. Now, all that is left to do is to replace the ConnectedApp component with the App component in src/index.js. First, adjust the import statement:

import App from './components/App'

8. Then, adjust the rendered component:

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
)

As we can see, using Hooks is much simpler and more concise than defining a separate container component.