Learn React Hooks

Defining the Reducer Hook

After defining the actions and the reducer function, we are going to define the Reducer Hook, and pass its state and the dispatch function to the components that need it.

Let's start implementing the Reducer Hook:

1. First, we have to import the useReducer Hook, by adjusting the following import statement in src/App.js:

import React, { useState, useReducer } from 'react'

2. Edit src/App.js, and remove the following State Hook:

    const [ user, setUser ] = useState('')

Replace the preceding State Hook with a Reducer Hook—the initial state is an empty string, as we had it before:

    const [ user, dispatchUser ] = useReducer(userReducer, '')

3. Now, pass the user state and the dispatchUser function to the UserBar component, ...