React Redux不可变的深度嵌套数组

Question

I have this structure

Server response from the API

server response json

Each of this topics must be in a separate response

my drawing

1. topics ( object )
   • matches ( array )
     • comments ( array )

So basically the array has 3 levels

I want to add a new subticket in a specific ticket in a specific

This is the state graph

redux graph

this works but obviously mutable

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

this also works and is immutable but it appends to the second layer ( tickets )

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

considering this , this should work, but it does not

  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
        ]
      ]
      ]
    }
  }

I am trying for 2 days I have no idea what is wrong with the last statement

Answer 1

update: this works

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;

from what I understand, cloneDeep is not very performant

still, a answer for what is wrong with the 3rd piece of code from the original comment would be appreciated

Answer 2

try below:

{
  ...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)
      ]
  }
}

Hope it helps. Thanks