add solution to Redux never mutate state (#35590)
This commit is contained in:
committed by
Randell Dawson
parent
25c906d389
commit
768b618e68
@ -3,8 +3,56 @@ title: Never Mutate State
|
|||||||
---
|
---
|
||||||
## Never Mutate State
|
## Never Mutate State
|
||||||
|
|
||||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/redux/never-mutate-state/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
The goal of this challenge is to return a new copy of state in reducer function because of state immutability in Redux.
|
||||||
|
|
||||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
### 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)
|
||||||
|
|
||||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
### Hint 2
|
||||||
|
.push() and .splice() directly modify the array
|
||||||
|
|
||||||
|
### Hint 3
|
||||||
|
.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
|
||||||
|
|
||||||
|
### Solution
|
||||||
|
```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);
|
||||||
|
```
|
||||||
|
Reference in New Issue
Block a user