Learn

At the end of the last exercise, you were able to pass the current state of the store and its store.dispatch method to the top-level component, <App />. This allowed the <App /> component to distribute the dispatch method and the slices of the store‘s state to each feature-component.

So it looks like you’re done, right? Not quite. Try adding a favorite recipe and you’ll see that it just disappears! Take a closer look at App.js and you’ll notice that the <FavoriteRecipes /> component is missing. Then, open up FavoriteRecipes.js and you’ll see that it is also incomplete. Let’s fix that.

Plugging in a feature-component to a Redux application involves the following steps:

Import the React feature-components into the top-level App.js file.
Render each feature-component and pass along the slice of state and the dispatch method as props.
Within each feature-component:
- Extract the slice of state and dispatch from props.
- Render the component using data from the slice of state.
- Import any action creators from the associated slice file.
- Dispatch actions in response to user inputs within the component.

This process is not different from how you implemented a React + Redux application in the past. Now, however, you must consider that the slices of the store‘s state and the dispatch method must be passed through props.

Instructions

Open up the App.js file.

First, import the FavoriteRecipes component from the FavoriteRecipes.js file.

Now, you can add in the <FavoriteRecipes /> component to the <App /> component’s structure. Like the other two components, you will need to pass the dispatch method to the component as a prop.

The slice data passed to <FavoriteRecipes /> will need to be filtered first based on the value of state.searchTerm. The filtered version of state.favoriteRecipes has been created for you and stored in the variable visibleFavoriteRecipes.

Within the return statement of the <App /> component, in the space below the <h2>Favorite Recipes</h2> element, add in a <FavoriteRecipes /> component. You should then pass along the following props:

favoriteRecipes: the visibleFavoriteRecipes value
dispatch: the dispatch method from the store.

If you complete this step correctly, you should see a blank square rendered under the “Favorite Recipes” header.

Open up the FavoriteRecipes.js file. The job of any presentational component in a Redux app is twofold:

Render the data for their associated slice of state.
Dispatch actions in response to user interaction within the component.

To do these two things, <FavoriteRecipes /> was given two props: favoriteRecipes and dispatch.

At the top of FavoriteRecipes(), extract these two values from the props parameter.

Now that the FavoriteRecipes() component has access to the favoriteRecipes slice of state, you can render its data instead of the blank box! Take a look at the return statement:

return (
  <div className="recipes-container">
    {['REPLACE_ME'].map(createRecipeComponent)}
  </div>
);

Replace the entire ['REPLACE_ME'] array with the favoriteRecipes prop value.

If done correctly, every recipe object within favoriteRecipes will be mapped to a <Recipe /> component and be rendered (try it out!).

The <FavoriteRecipes /> component wants to dispatch an action to the store within onRemoveRecipeHandler(), but where are the action creators to help create those actions?

Remember, they have been moved to, and exported from, the favoriteRecipesSlice.js file!

At the top of FavoriteRecipes.js, import the action creator function, removeRecipe.

Finally, the removeRecipe() action creator accepts a recipe argument.

Within onRemoveRecipeHandler(), which receives a recipe parameter, dispatch a removeRecipe() action with recipe as an argument.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?