Adding item 2 levels deep in Redux Reducer - reactjs

Question

I am trying to add notes to a task object but what I have so far adds it to all the tasks. When I try different ways, it doesn't compile. The Object.assign doesn't like coming after the .push()
When it adds to all task:
let taskReducer = function(tasks = [], action) {
switch (action.type) {
case 'ADD_NOTE':
return tasks.map((task) => {
const { notes } = task;
const { text } = action;
notes.push({
text,
id: notes.length,
})
return task.id === action.id ?
Object.assign({}, { task, notes }) : task
})
When it doesn't compile:
let taskReducer = function(tasks = [], action) {
switch (action.type) {
case 'ADD_NOTE':
return tasks.map((task) => {
return task.id === action.id ?
const { notes } = task;
const { text } = action;
notes.push({
text,
id: notes.length,
})
Object.assign({}, { task, notes }) : task
})

Answer 1

You almost never want to use Array.push() in a reducer, because that directly mutates the existing array, and direct mutations generally break UI updates (see the Redux FAQ). You could use push() on a new copy of the old array, but most examples don't use that approach. Most of the time, the suggested approach is to use const newArray = oldArray.concat(newValue), which returns a new array reference containing all the old items plus the new item.
Beyond that, keep in mind that when updating nested data immutably, every level of nesting needs to have a copy made and returned.
Haven't actually tested this, but I think your code needs to look roughly like this example:
let taskReducer = function(tasks = [], action) {
switch (action.type) {
case 'ADD_NOTE':
return tasks.map((task) => {
if(action.id !== task.id) {
return task;
}
const { notes } = task;
const { text } = action;
const newNotes = notes.concat({id : notes.length, text});
const newTask = Object.assign({}, task, {notes : newNotes});
return newTask;
}
default : return tasks;
}
}