1494a50123
* fix: restructure certifications guide articles * fix: added 3 dashes line before prob expl * fix: added 3 dashes line before hints * fix: added 3 dashes line before solutions
71 lines
1.5 KiB
Markdown
71 lines
1.5 KiB
Markdown
---
|
|
title: Never Mutate State
|
|
---
|
|
# Never Mutate State
|
|
|
|
---
|
|
## Problem Explanation
|
|
The goal of this challenge is to return a new copy of state in reducer function because of state immutability in Redux.
|
|
|
|
|
|
---
|
|
## Hints
|
|
|
|
### Hint 1
|
|
const means: it cannot change through re-assignment, and it cannot be re-declared.
|
|
Since objects and arrays are mutable, you can add to it by index (array[3] = 3), by property (object.name="sam"), by extending (with various array methods)
|
|
|
|
### Hint 32
|
|
.push() and .splice() directly modify the array
|
|
|
|
### Hint 33
|
|
.concat() doesn't modify array but just returns a new array
|
|
|
|
### Hint 4
|
|
.slice() doesn't modify array but just returns a new array
|
|
|
|
### Hint 5
|
|
spread operator [...array] doesn't modify array but just returns a new array
|
|
|
|
|
|
---
|
|
## Solutions
|
|
|
|
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
|
|
|
```javascript
|
|
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 todos.concat(action.todo);
|
|
// or return [...todos, action.todo]
|
|
|
|
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);
|
|
```
|
|
</details>
|