diff --git a/guide/english/certifications/front-end-libraries/redux/never-mutate-state/index.md b/guide/english/certifications/front-end-libraries/redux/never-mutate-state/index.md index 09e1375485..101b0208d3 100644 --- a/guide/english/certifications/front-end-libraries/redux/never-mutate-state/index.md +++ b/guide/english/certifications/front-end-libraries/redux/never-mutate-state/index.md @@ -3,8 +3,56 @@ title: Never Mutate State --- ## Never Mutate State -This is a stub. Help our community expand it. +The goal of this challenge is to return a new copy of state in reducer function because of state immutability in Redux. -This quick style guide will help ensure your pull request gets accepted. +### 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 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); +```