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 thedispatch
method as props. - Within each feature-component:
- Extract the slice of
state
anddispatch
fromprops
. - 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.
- Extract the slice of
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
: thevisibleFavoriteRecipes
valuedispatch
: thedispatch
method from thestore
.
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.