How Do I Get My View To Update After An Item Was Removed From My Store/state In React With Redux

I am new to React and Redux and just getting comfortable with the idea of managing state and React in general. I preface that as I may need the possible solution to be in the conte

Solution 1:

After deleting the student you are dispatching the action and you are passing the action creator scrubStudent to dispatch. You are passing id of the deleted student in that action creator. Now the way you have defined your action creator is like this

exportfunction scrubStudent(student) {
  return {
    type: DELETE_STUDENT,
    student
  };
}

So the returned value of this function will be an object something like this

scrubStudent(5) // returns {type: "DELETE_STUDENT", student: 5}

But in your reducer you are comparing the ids like this

case DELETE_STUDENT:
      // console.log("action.student", action.student);
      // console.log("state", state);
      newState = state.students.filter(function(student) {
        return student.id !== action.id;
      });
      return newState;

In the above code action.id is undefined. Instead student id is saved in as action.student. So the comparison will return true for all the elements of array. So everytime all the elements will be included in the new state. So try to change your above code like this

case DELETE_STUDENT:
      // console.log("action.student", action.student);
      // console.log("state", state);
      newState = state.students.filter(function(student) {
        return student.id !== action.student;
      });
      return newState;