We have already handled the loading state in the ChangeTheme component. Now, we are going to implement the error state for posts.

Let's get started handling the error state for posts:

1. In src/reducers.js, define a new errorReducer function with a new action type, POSTS_ERROR:

function errorReducer (state, action) {
    switch (action.type) {
        case 'POSTS_ERROR':
            return 'Failed to fetch posts'

        default:
            return state
    }
}

2. Add the errorReducer function to our appReducer function:

export default function appReducer (state, action) {
    return {
        user: userReducer(state.user, action),
        posts: postsReducer(state.posts, action),
        error: errorReducer(state.error, action)
    }
}

3. In src/App.js, adjust the default state of our Reducer Hook:

    const [ state, dispatch ] = useReducer(appReducer, { user: '', posts: [], error: '' })

4. Pull the error value out of the state object:

    const { user, error } = state

5. Now, we can adjust the existing Effect Hook that handles new data from the posts resource, by dispatching a POSTS_ERROR action in the case of an error:

    useEffect(() => {
        if (posts && posts.error) {
            dispatch({ type: 'POSTS_ERROR' })
        }
        if (posts && posts.data) {
            dispatch({ type: 'FETCH_POSTS', posts: posts.data })
        }
    }, [posts])

6. Finally, we display the error message before the PostList component:

                 {error && <b>{error}</b>}
                 <PostList />

If we only start the client now (via npm run start:client), the error will be displayed:

As we can see, the Failed to fetch posts error gets displayed in our app, because the server is not running. We can now move on to implementing post creation via requests.