There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
You can also find further discussion and get answers to your questions over in Language Help.
Agree with a comment or answer? Like () to up-vote the contribution!
I was wondering how to download all the files from this lesson? I would like to continue working on the challenges at the bottom without having to come back here in the Syllabus each time.
In the tools area I can create Gists, but that is per file and that would take a long time to go through each of the files creating them and then importing them to Github.
I also want to tackle the challenges at the end of Redux Toolkit lesson. I was hoping to get some insights from here. Please I want to know if you eventually solved those challenges
The example in this lesson quietly introduces the Provider component in index.js, and the useSelector method in FavoriteRecipes.js. This seems to be an important new concept for passing state directly to components as opposed to threading it down through props. Is this concept expressly covered in another lesson? I don’t see it in the syllabus. Thanks!
I was also interested in doing the extra challenges to solidify a bit Redux Toolkit (since it’s a lot of information and an important part) before learning additional things, but don’t really know how to approach the challenges.
I was really hoping to find some insight here but it seems no one has figured it out and that the thread isn’t monitored:/
I really wish there were more exercises on the Redux sections to solidify each part a bit more before proceeding with more information and more advanced exercises
Hi, to whom it may work, here I leave the code I used to tackle the extra challenges, not sure if it’s all correct, but, here you go anyway:
// Create the userProfileSlice.js slice
// Import createSlice
import { createSlice } from '@reduxjs/toolkit';
// Define the initialState where the user's favorite recipes will be stored
export const initialState = {
favoriteRecipes: [],
// Add another property to the initial state, which will be managed by the addUserCreatedRecipe reducer
userCreatedRecipes: [],
}
// Configure the Slice with name, initialState, and reducers/actions
export const userProfileSlice = createSlice({
name: 'userProfile',
initialState: initialState,
reducers: {
addFavoriteRecipe: (state, action) => {
state.favoriteRecipes.push({ ...action.payload, rating: 0 });
},
removeFavoriteRecipe: (state, action) => {
state.favoriteRecipes = state.favoriteRecipes.filter(recipe => recipe.id !== action.payload.id);
},
// Add a reducer to add user-created recipes
addUserCreatedRecipe: (state, action) => {
state.userCreatedRecipes.push({ ...action.payload, rating: 0 });
},
// Reducer to rate recipes
rateRecipe: (state, action) => {
const { id, rating } = action.payload;
// Find the recipe in favoriteRecipes or userCreatedRecipes
// recipe => recipe.id === id: takes each recipe in the array and checks if recipe.id is equal to id (the id that comes in action.payload).
const recipe = state.favoriteRecipes.find(recipe => recipe.id === id) || state.userCreatedRecipes.find(recipe => recipe.id === id);
// If a recipe is found (recipe is not undefined), update the rating property of that recipe with the rating value that comes in action.payload.
if (recipe) {
recipe.rating = rating;
}
}
}
})
// Export the actions and the reducer
export const { addFavoriteRecipe, removeFavoriteRecipe, addUserCreatedRecipe, rateRecipe } = userProfileSlice.actions;
export default userProfileSlice.reducer;
// The new reducer must be added in the file where the store is configured, using configureStore()
/* used in store:
import { userProfileReducer } from '../features/userProfile/userProfileSlice.js';
userProfile: userProfileReducer
*/
Hello,
I believe it can be completed using combineReducers for the recipe slices in the example (searchTerm, allRecipes, favoriteRecipes, customRecipes). Each user needs their own unique id and arrays for storing the state of the recipe. A useful starting point maybe is to separate the code for handling users and the code for handling recipes into their own reducers.
) below.
) to up-vote the contribution!