Learn React Hooks

Using useResource with a Reducer Hook

The useResource Hook already handles the state for the result of our request, so we do not need an additional useState Hook to store the state. If we already have an existing Reducer Hook, however, we can use it in combination with the useResource Hook.

We are now going to implement the useResource Hook in combination with a Reducer Hook in our app:

1. In src/App.js, import the useResource Hook from the react-request-hook library:

import { useResource } from 'react-request-hook'

2. Remove the previously defined useEffect Hook that uses fetch to request /api/posts.
3. Define a new useResource Hook, where we request /posts:

    const [ posts, getPosts ] = useResource(() => ({        url: '/posts',        method: 'get'    }))