Tell us what’s happening:
Given the following template:
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
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);
The solution provided in the hint page expects the user to add the following to their ADD_TO_DO case to pass the test:
case ADD_TO_DO:
return todos.concat(action.todo);
However, this is a broken solution in that it always modifies the original todos array, rather than the current state of the object. Upon attempting to dispatch multiple new entries to the list, the user will only be modifying the last entry, producing a new state that always has only 5 entries. The actual solution should be:
return state.concat(action.todo);
Challenge: Never Mutate State
Link to the challenge: