Never Mutate State Redux

JavaScript
1

Tell us what’s happening:

Hi,I don’t know what i made wrong here, I’m not able to pass the challenge please help me to pass this challenge.I can’t figure out the problem!

This is the error showed on the web console>>>>
Dispatching an action of type ADD_TO_DO on the Redux store should add a todo item and should NOT mutate state.

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.concat(action.todo);
    default:
      return state;
  }
};

// an example todo argument would be 'Learn React',
const addToDo = (todo) => {
  return {
    type: ADD_TO_DO,
    todo : ["Learn React","Learn how to swim"]
  }
}


const store = Redux.createStore(immutableReducer);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36.

Link to the challenge:

2

Try change your code so:

// don't mutate state here or the tests will fail
      return
    default:
      return state;
  }
3

I believe the problem is that you’re making a shallow copy of the array. Instead, you should try to make a deep copy, and then add your value. I believe you need to do something more like this:

export const messageReducer = (state = [], action) => {
 switch (action.type) {
   case ADD:
     return [
       ...state,
       action.message
     ];
   default:
     return state;
 }
};

This in particular is the syntax you should follow:

 return [
       ...state,
       action.message
     ];

You may be interested in this as well: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Copy_an_array

2 Likes
4

We should copy state, for example with slice method. So we let a state witout mutating

// don't mutate state here or the tests will fail  
      let newArr = state.slice();
      newArr.splice(newArr.length, 0, action.todo);
      return newArr;
    default:
      return state;
  }
1 Like
5

Thanks for the response, But it’s not working though

6

Thanks for the response,but the same error shows!

7

Remove this portion I’ve commented out:

const addToDo = (todo) => {
  return {
    type: ADD_TO_DO,
    todo /*: ["Learn React","Learn how to swim"]*/
  }
}
2 Likes
9

Now i got the point and also little stupid mistake,i not aware of this comment

// an example todo argument would be 'Learn React',

it means store.dispatch(addToDo([“Learn React”]) on behind the scene,Anyway thanks for the help,you thought me something today i’m really happy about it!

1 Like
10

todo argument itself a key (i.e.property) for the object.

const sample = (todo) => {
  return {
    type: ADD_TO_DO,
    todo 
  }
}

console.log(sample(["learn react"]))

logs:

{type: "ADD_TO_DO", todo: Array(1)}
todo: Array(1)
0: "learn react"
length: 1
1 Like