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.