Never Mutate State help

JavaScript
1

Tell us what’s happening:
just curious to know why slice and es6 notation […state] is not working here?(commented here)

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
      //let r = state.slice(0);
// return r;
      //let arr = [...state];
      return state.concat(action.todo);
      
      //return arr;
    default:
      return state;
  }
};

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

const store = Redux.createStore(immutableReducer);

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/redux/never-mutate-state

1 Like
2

They work, but then you have to return them.

For example:

let arr = [...state];
return [...arr, action.todo]

or just

return [...state, action.todo]
3

but he’s already returning the updated array here?

4

i pasted your code exactly into my FCC on chrome and it worked perfectly as is.
I heard that different people have had success with different browsers in this challenge (no idea why), so if this doesn’t work for you on one browser, try another…

5

Yes, his uncommented code should work. He was asking why the commented code did not work. I was addressing that.

6

ah i see. In the commented out code he wasn’t adding the new todo string in…

7

I don’t understand this line [. . . state , action . todo] ? [. . . state] isn’t it enough to return new state to the store(because I think todos is the state)? why should I have to update the actionCreator’s todo key?

8 
[...state,action.todo]

This line creates a new state array containing the old array items plus a new item ( a new todo added by the user)

If you don’t add the new todo to the state then the state will won’t reflect the current situation

9

@hbar1st so what basically you are saying that if I call it again it will just add another empty String […state ," " , " "](something like this) and return this new state to reflect it?

10

It will add anew todo string which is never just empty because the application takes the string from the form input area when the user clicks a button…

11

I think I always get confused in the things that are going behind the scenes. @hbar1st can you please tell me how did you get this in a first place or you use some other materials than FCC to learn.

12

hi there,

I think it will become a lot clearer about 4 challenges forward from this point

https://learn.freecodecamp.org/front-end-libraries/react-and-redux/manage-state-locally-first

Basically you are building towards creating an input field and a button.
User enters the todo in the input field and clicks Submit.
The todo item she enters gets added to the list stored in the state.
Then it gets rendered out to the screen in bullet form.

13

I will keep these points in mind in later challenges. Thanks @hbar1st you are life saviour. :smiley:

1 Like
14

@kevinSmith, @Deepaksharma1995, @hbar1st - I have seen you guys answering questions several times in these forums and I greatly appreciate it. Can you explain why there is not a value after the ‘todo’ key in the addToDo variable?

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

Why is it not:

const addToDo = (todo) => {
return {
type: ADD_TO_DO,
todo: 'Learn React’
}
}

15

i believe that’s just a shortcut for
todo: todo

I think this was covered in the ES6 section… but I can’t recall exactly.

Edit: reference to the ES6 section that discusses this
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-simple-fields

17

@hbar1st of course! It all just clicked! Thank you so much. Thank you too, @camperextraordinaire!

1 Like