Learn React Hooks

Creating a useDispatch Hook

In many components, we need the dispatch function to do certain actions, so we often have to do the following:

import { StateContext } from '../contexts'export default function SomeComponent () {    const { dispatch } = useContext(StateContext)    // ...

We can abstract this functionality into a useDispatch Hook, which will get the dispatch function from our global state context. Doing this will also make it easier to replace the state management implementation later on. For example, later on, we could replace our simple Reducer Hook with a state management library such as Redux or MobX.

Let's define the useDispatch Hook now using the following steps:

1. Create a new src/hooks/useDispatch.js file.
2. Import the useContext ...