Redux todo list advanced - reactjs

Question

I'm doing a todo list using redux and I want to add sub todo list for each todo, but I can't understand why my line for my reducer is not working (see above)
Can you help me please ?
import { combineReducers } from 'redux'
import { ADD_TODO, TOGGLE_TODO, ADD_SUB_TODO} from '../constants/ActionTypes'
import _ from 'lodash'
const initialState = {
todos : []
}
export function todo(state, action) {
switch (action.type) {
case ADD_TODO:
return {
id: action.id,
text: action.text,
completed: false
};
default:
return state;
}
}
export function allTodo (state = initialState, action) {
switch (action.type) {
case ADD_TODO:
return {
...state,
todos: [
...state.todos,
{
id: action.id,
text: action.text,
completed: false,
subtodo:[]
}
]
};
case ADD_SUB_TODO:
console.log("REDUCER")
console.log(...state.todos)
return {
...state,
// THIS LINE DOES'NT WORK :
...state.todos[0].subtodo: [ ...state.todos[0].subtodo, {
id: action.id,
text: action.text
}]
};
default:
return state;
}
};
export default combineReducers({
allTodo
})
this line is not working :
...state.todos[0].subtodo: [ ...state.todos[0].subtodo, {
id: action.id,
text: action.text
}]
this is my sub todo object :
{
id: action.id,
text: action.text
}

Answer 1

Assuming that action.parent contains the index of parent todo, try this.
case ADD_SUB_TODO:
let subtodo = {id: action.id, text: action.text}
let subtodos = [...state.todos[action.parent].subtodo, subtodo]
let todo = _.assign({}, state.todos[action.parent], {subtodo: subtodos})
return _.assign({}, state, {todos: [...state.todos, todo]})
if you want to try this with one todo the way you have in your question,
case ADD_SUB_TODO:
let subtodo = {id: action.id, text: action.text}
let todo = _.assign({}. state.todos[0], {subtodo: [subtodo]})
return _.assign({}, state, {todos: [...state.todos, todo]})

Answer 2

Thanks to Mad Wombat, this is the final code :
case ADD_SUB_TODO:
let subtodo = {id: action.id, text: action.text}
let subtodoList = _.concat(...state.todos[action.parentId].subtodo, subtodo)
let todo = _.assign({}, state.todos[action.parentId], {subtodo: subtodoList})
return {
...state,
...state.todos[action.parentId] = todo,
todos: [
...state.todos
]
};