React Redux Неизменяемый глубоко вложенный массив

Question

У меня есть эта структура

Ответ сервера от API

ответ сервера json

Каждая из этих тем должна быть в отдельном ответе

мой рисунок

1. разделы (объект)
   • совпадения (массив)
     • комментарии (массив)

Таким образом, в основном массив имеет 3 уровня

Я хочу добавить новый подклет в конкретный тикет в конкретном

Это граф состояний

редукционный граф

это работает, но, очевидно, изменчиво

state[topic_id].tickets[ticket_index].subtickets = state[topic_id].tickets[ticket_index].subtickets.concat(action.subticket);
return {...state};

это также работает и является неизменным, но оно добавляется квторой слой (тикеты)

  return {
    ...state
    ,[topic_id]:{
      ...state[topic_id]
      ,tickets:[
        ...state[topic_id].tickets
        ,action.subticket
      ]
    }
  }  ;

учитывая это, это должно работать, но не работает

  return {
    ...state
    ,[topic_id]:{
      ...state[topic_id]
      ,tickets:[
        ...state[topic_id].tickets
        ,[topic_id]:[
    ...state[topic_id].tickets[topic_id],
    subtickets:[
        ...state[topic_id].tickets[topic_id].subtickets,
        action.subticket
        ]
      ]
      ]
    }
  }

Я пытаюсь в течение 2 дней, я не знаю, что не так с последнимзаявление

Answer 1

попробуйте ниже:

{
  ...state,
  [topic_id]: {
      ...state[topic_id],
      tickets: [
        ...state[topic_id].tickets.slice(0, ticket_index),

        state[topic_id].tickets[ticket_index] = {
            ...state[topic_id].tickets[ticket_index],
            subticket: [
                ...state[topic_id].tickets[ticket_index].subticket,
                {id: "st15"} // new subticket
            ] 
        },

        ...state[topic_id].tickets.slice(ticket_index + 1)
      ]
  }
}

Надеюсь, это поможет.Спасибо

Answer 2

обновление: это работает

import { cloneDeep } from 'lodash';

{...}

let newState = cloneDeep(state);

newState[topic_id].tickets[ticket_index].subtickets = newState[topic_id].tickets[ticket_index].subtickets.concat(action.subticket);

return newState;

из того, что я понимаю, cloneDeep не очень эффективен

все же, ответ на вопрос, что не так с 3-м фрагментом кода из исходного комментариябыл бы признателен