Удаление элемента и его дочерних элементов в ngrx

Question

Я новичок в магазине ngrx и смущен размещением логики, т.е. должен ли цикл через массив переходить к редуктору или компоненту. У меня есть массив объектов типа Item, и мне нужно удалить элемент. При удалении элемента я должен удалить ссылку на него в parent'children, а также всех его дочерних элементах.

    export class Item {
      id: string;
      message: string;
      children: string[];
    }

Свойство children элемента Item содержит идентификаторы объектов самого типа Item.

    Items: Item[] = [
     {id: "1", "message": "First Message" , children:["4","5"]},
     {id: "2", "message": "Seccond message" , children:["3"]},
     {id: "3", "message": "First child Message" , children:[]},
     {id: "4", "message": "Seccond child message" , children:["6"]},
     {id: "5", "message": "third child message" , children:[]},
     {id: "6", "message": "child message" , children:[]},
    ]

Мне нужно удалить элемент и соответствующие дочерние элементы из массива при отправке действия "DeleteItemByID", например, если я удаляю элемент с id=4, он обновляет элемент с id ="1" и удаляет "4" из его детский массив. Затем действие удаления удаляет дочерние элементы элемента, который является элементом с id="6", а затем, наконец, удаляет элемент с id="4".

    Items: Item[] = [
     {id: "1", "message": "First Message" , children:["5"]},
     {id: "2", "message": "Seccond message" , children:["3"]},
     {id: "3", "message": "First child Message" , children:[]},
     {id: "5", "message": "third child message" , children:[]},
    ]

    export class DeleteItemByID implements Action {
        readonly type = "DeleteById";
     /**
      * Constructor
      * @param payload The id of the discussion to remove
      */
        constructor(public payload: string) { }
    }

    /*App state*/
    export class AppState{
        items: Item[]
    }

    /* reducer */
    export function reducer(state: AppState = [], action  ) : AppState{
       switch (action.type) {
            case "DeleteById":
                /* Delete Logic*/
                return {};
            default:
                return state;
    }

Помогите мне выбрать лучший подход, который я должен использовать для операции удаления.

Answer 1

Правильный ответ будет отличаться от случая к случаю,

Случай 1:- Если вы хотите повторно использовать это поведение удаления в нескольких местах, то есть в нескольких компонентах / службах. Создайте два разных действия, то есть DeleteChildrenItemById и DeleteItemById.

ИЛИ

Вы можете создать метод службы, который удалит необходимые элементы из массива и отправит весь новый массив в редуктор для замены существующего, что поможет вам избежать сложного входа в редуктор.

Случай 2:- Если такое поведение требуется только для этого компонента, выполните удаление в компоненте и отправьте этот новый массив редуктору.