Learn React Hooks

Using Hooks for the App component

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 ...