REDUX mutate state error

JavaScript
1

Tell us what’s happening:
I tried to use the spread operator to create a new array and then store the ‘todo’ property of action type ‘ADD_TO_DO’ inside of it. But I keep getting the “should not mutate state” error. I’m not sure what am I missing. Any help would be great! Thank you.

Your code so far


const ADD_TO_DO = 'ADD_TO_DO';

// A list of strings representing tasks to do:
const todos = [
  'Go to the store',
  'Clean the house',
  'Cook dinner',
  'Learn to code',
];

const immutableReducer = (state = todos, action) => {
  switch(action.type) {
    case ADD_TO_DO:
      // don't mutate state here or the tests will fail
      return [...state, action.todo];
    default:
      return state;
  }
};

// an example todo argument would be 'Learn React',
const addToDo = (todo) => {
  return {
    type: ADD_TO_DO,
    todo: 'Learn React'
  }  
}

const store = Redux.createStore(immutableReducer);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:

2

The issue isn’t your immutableReducer function. That’s fine. The issue is that you modified the addToDo (because of the comment above it?). todo is a parameter being passed to addToDo(), and they are using ES6 syntax to not have to write the redundant declaration of the second (todo) property in the returned action object.:

  return {
    type: ADD_TO_DO,
    todo: todo
  }

UPDATE: You may want to reset your code and just re-write the line in which you spread/push or concat the returned array.

3

Thank you for the explanation. I understand this now.