CODEWITHSUNDEEP
javascriptreactjsredux
catandmouse
catandmouse

Reputation: 11809

How do I properly update an item in my array in redux without mutating?

const state = [
    {
        list: []
    }
];

The list is a list of student objects, for example:

list: [
   { id: 1, name: "Mark", attendance: true },
   { id: 2, name: "John", attendance: false }
]

I have a button that triggers a post request to an API to change attendance to true. Post request returns the student object that was changed as in e.g.:

{ id: 2, name: "John", attendance: true }

This works fine and if no errors, will dispatch ATTENDANCE_SUCCESS.

Now, with this kind of set-up:

export function students(state, action) {
    let latestState = state[state.length - 1],
        newState = Object.assign({}, latestState);
    switch (action.type) {
       case "ATTENDANCE_SUCCESS":
          if (action.res.errorCode == 0) {
             // Need to change redux state 'attendance' value to true for a student with ID returned from the POST request
          }
    }

Initially, I did:

const studentChanged = newState.list.find(function(student) {
  return (
        student.id ===
        action.res.data.id
  );
});
studentChanged.attendance = true;

But it mutates the state in the redux store (although I am not sure how it's exactly happening since I assumed newState is already a copy).

What's the proper way?

Upvotes: 0

Views: 65

Answers (1)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38757

The following would update a single item in the array. The critical aspect here is that if the id of the item does not match the id from the action payload, it returns the item unaltered, otherwise it updates the attendance property. Array.prototype.map returns a new array so it would be immutable.

export function students(state, action) {
  switch (action.type) {
    case "ATTENDANCE_SUCCESS":
      if (action.res.errorCode == 0) {
        return state.map(student => {
          // we want to leave non matching items unaltered
          if (student.id !== action.res.data.id) {
            return student;
          }

          return { ...student, attendance: true };
        });
      }

      return state;          
    default:
      return state;
  }
}

Here is a StackBlitz to demonstrate the functionality.

Hopefully that helps!

Upvotes: 3

Related Questions