I need something explained to me regarding this Core Redux API lesson

Web Development
1

Hey folks,

I’ve been doing the Core Redux API lesson today and I ran across something that really baffled me and I was wondering if someone could explain this to me. I get that a lot of this stuff, we’re not supposed to overthink it and just do it the way it’s supposed to be done. But this confused me so much:

codecademy redux api lesson question
codecademy redux api lesson question1920×1080 237 KB

case 'favoriteRecipes/removeRecipe':
      return favoriteRecipes.filter(element => element.id !== action.payload.id);

That really confuses me. to remove a recipe from your favorites, you have to make element that is a function of the element’s id, and then do the OPPOSITE of the action.payload.id? Am I saying that correct? I really want to make sure I get the core concept of this, it seems like it would be pretty important to be able to add and remove favorites on any website, so I’m glad they’re teaching us about the topic.

Anyway, what would you guys say about my summary of this? is that basically correct or am I looking at it wrong?

2

The filter method (Array.prototype.filter() - JavaScript | MDN) iterates over the elements of an array. Each element in the array is passed to a function which ultimately gives a true/false answer. If the answer is true, then the element is added to a new array. If the answer is false, it is excluded. Consider the simple examples,

const numbers = [5, 2, 4, 3, 9, 5, 2, 4, 1, 4, 7, 0]

// Only even elements will pass the test (zero remainder) 
// and will be included in returned array
let result = numbers.filter(num => num % 2 == 0)
console.log(result)
// [ 2, 4, 2, 4, 4, 0 ]

// Elements which are not equal to 4 will pass the test and will be included in
// returned array. Elements equal to 4 will fail the test and be excluded.
let result_2 = numbers.filter(num => num != 4)
console.log(result_2)
// [ 5, 2, 3, 9, 5, 2, 1, 7, 0 ]

I am not familiar with the exercise, so I can only make assumptions based on your screenshot. In your screenshot, favoriteRecipesReducer has two parameters favoriteRecipes and action. I am assuming favoriteRecipes is supposed to be an array of objects, whereas action is supposed to be an object.

case 'favoriteRecipes/removeRecipe':
      return favoriteRecipes.filter(element => element.id != action.payload.id);

The filter method will iterate over the favoriteRecipes array. In each iteration, an object from the array will be passed as the argument to the arrow function and will be assigned to the element parameter. If the id property of this object is different than the action.payload.id, then the condition is true and it will be retained in the resulting array. If the id’s match, then the condition will be false and it will fail the test. Consequently, the object will be excluded from the resulting array. Consider the example,

const myArray = [ { name: "Jack", age: 17 }, 
                  { name: "John", age: 24 }, 
                  { name: "Jill", age: 19 }, 
                  { name: "Lily", age: 24 } ]

let result = myArray.filter(person => person.age != 24)
console.log(result)
// [ { name: 'Jack', age: 17 }, { name: 'Jill', age: 19 } ]
// The objects whose age property was 24 are excluded.