Как изменять вложенные комментарии (объекты) в vuex store?

Question

[Алексей Скляров]

Добавил хранилище для комментариев, которое имеет вид:

/**
 * STATE
 * 
 */
const state = {
    comments: [],
    errors: [],
    commentsLoaded: false
}
........

comments представляет собой массив объектов комментариев, в котором существует свойство reply, являющееся массивом с такими же объектами комментариев:

Структура для примера

comments: [
        {
            id: 1,
            replies : [
                {
                    id: 2
                },
                {
                    id: 3,
                    replies: [
                        {
                            id: 4
                        }
                    ]
                }
            ]
        },
        {
            id: 5,
            replies: []
        },
        {
            id: 6,
            replies: []
        }
    ],

Какую задачу я решаю: пользователь может добавить ответ, к какому-то комментарию, соответственно после добавления комментария на сервер, я получаю от сервера добавленный комментарий и делаю commit.
Проблема заключается в том, что я по ID комментария (на который пользователь дал ответ), ищу его в своем массиве и пушу новый комментарий в comment.reply.

Сначала это выглядело так:

ADD_REPLY(state,{comment_id,data}) {
        state.comments.find(c => c.id === comment_id).replies.unshift(data);
    },

И это работало для глубины вложенности = 1, как только я пытаюсь дать ответ на вложенный комментарий (глубина вложенности > 1) , данная функция уже не работает.

Пытался искать комментарий и с помощью flatMap:

state.comments.flatMap(comment => comment.replies).find(c => c.id === comment_id);

но почему-то flatMap возвращает все, кроме комментария, на который дается ответ (я так понимаю что проблема в том, что последнее вложение функция не показывает).
Пробовал и подобное:

state.comments.flatMap(function loop(node) {
            if (node.replies) {
                return node.replies.flatMap(loop);
            } else {
                return [node];
            }              
        })

Но как я понимаю, прямого доступа к объекту я не получаю, а лишь к новому, то есть не могу его изменить.

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

Answer 1

[0xD34F]

Передавайте в мутацию вместо id сам объект комментария - тогда ничего искать будет не надо.

Или сделайте рекурсивную функцию поиска, что-то вроде

const find = (arr, id) =>
  (Array.isArray(arr) ? arr : []).reduce((found, n) =>
    found || (n.id === id ? n : find(n.replies, id))
  , null);

Comments

[Алексей Скляров]

Плохо понимаю, как именно надо передавать объект комментария?

Я в самом компоненте вызываю функцию из ...mapActions, в нее передаю comment (текущий комментарий в компоненте comment), но в сам экшн придет новый объект, как я смогу по нему получить доступ к такому же объекту в store? Насколько я знаю поменять что-то в самом store, мы можем так store.field = value

Чтоб было понятнее:
Метод в Comment.vue (объект текущего комментария и сообщение, в дальнейшем я в comment.reply помещу полученный комемнтарий с апи)

/**
         * Method to send reply to current comment
         * 
         */
        sendReply() {
            let comment = this.comment;
            let message = this.reply;
            this.replyMessage({comment,message});
        },

Сам экшн:

/**
     * Method to get all comments from state
     * 
     * @param object comment  
     * @param string message
     * @return void
     */
    async reply({commit,rootGetters}, {comment, message}) {
        axios
        .post(`/api/comment/${comment.id}/reply`,{
            comment: message,
            type: 'comment',
            commentable_id: comment.commentable_id,
            api_token: rootGetters['user/getAuthUser'].api_token
        })
        .then( response => {     
            let data = response.data.comment;

            commit('ADD_REPLY',{comment,data});            
        })
        .catch(error => {
            for (const [key, value] of Object.entries(error.response.data.error.message)) {
                commit('ADD_ERROR_MESSAGE',value); 
            };          
        });

Ну и сама мутация:

ADD_REPLY(state,{comment_id,data}) {
        state.comments.flatMap(comment => comment.replies).find(c => c.id === comment_id).replies.unshift(data);
    },

[0xD34F]

Алексей Скляров,

commit('ADD_REPLY',{comment,data});

ADD_REPLY(state,{comment_id,data}) {

Нет слов.

[Алексей Скляров]

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