Skip to Content
Learn
The React Redux Library
The useDispatch() Hook

With the <Provider> component, selectors, and useSelector() implemented, you are now able to access the application state and subscribe component rendering to data changes. In this exercise, you are going to look at the final step: dispatching actions.

Without the react-redux library, you needed to create a reference to store.dispatch and pass it through the application’s props. With react-redux you can now access this reference from each component with useDispatch().

import { useDispatch } from 'react-redux'; // within component definition const dispatch = useDispatch() dispatch({type: addTodo});

The above example:

  • Imports useDispatch from react-redux.
  • Calls useDispatch() to obtain a reference to the Redux store dispatch() function and assigns it to dispatch.
  • Dispatches an action using dispatch() with an action object as the argument.

Here is a complete example with action creators and a Component definition:

import { useSelector, useDispatch } from 'react-redux'; import { selectTodo } from './todoSlice.js'; import { removeTodo } from './todoSlice.js'; const Todo = () => { const todo = useSelector(selectTodo); const dispatch = useDispatch(); return ( <button onClick={() => dispatch(removeTodo(todo))}> {todo} </button> ) }

This example demonstrates:

  • Importing useDispatch (alongside useSelector).
  • Importing the removeTodo action creator from ./todoSlice.js
  • Creating the dispatch variable that holds the reference to the Redux store dispatch function.
  • Dispatching an action using dispatch() with removeTodo.

The useDispatch hook allows you to dispatch actions from any component that is a descendent of the <Provider> component, therefore avoiding passing a reference to store.dispatch through props. Both approaches accomplish the same thing but useDispatch() avoids props drilling.

In AllRecipes.js, take a look at the functions onFirstRender() and onAddRecipeHandler(). These handlers are still implemented from the earlier version of the app when dispatch was made available through props. You will now provide a new reference to the Redux store’s dispatch function.

Instructions

1.

In AllRecipes.js:

  • Add useDispatch to the react-redux import statement.
  • Create a variable dispatch inside the AllRecipes component and assign it the reference returned by useDispatch().
2.

In FavoriteRecipes.js, useDispatch has been added to the import statement and the dispatch reference has been defined. Use dispatch to dispatch the action inside one of the handler functions.

Inside the onRemoveRecipeHandler function:

  • Dispatch an action using dispatch()
  • Pass the removeRecipe() action creator to dispatch().
  • Pass recipe to the action creator.

When you run the application you should be able to remove items from your favorite list. The SearchTerm component action dispatching has also been implemented so you can now filter both recipe lists using the text box.

Folder Icon

Take this course for free

Already have an account?