Как добавить новый обьект в массив Redux

Question

Создаю to do приложение на React, Необходимо создать карточку в списке. Не понимаю как добавить новую карточку, а не обновить текущу. Получается такая структура, но мне нужно чтобы в listItem создавались отдельные обьекты под каждый cardName

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

case 'CREATE_CARD': {
        return {
            ...state,
            boardItem: state.boardItem.map((item, index) => {
                if (item.id === action.payload.boardIndex) {
                    return {
                        ...item,
                        list: item.list.map((listArray) => {
                            if (listArray.listId === action.payload.listId) {
                                console.log(listArray)
                                return {
                                    ...listArray,
                                    listItem: listArray.listItem.map((card) => {
                                        console.log(card)
                                        return {
                                            ...card,
                                            cardName: [...card.cardName, action.payload.cardName]
                                        }
                                    })
                                }
                            }
                            return listArray;
                        })
                    }
                }
                return item;
            })
        }
    }

Answer 1

Список карточек должен быть массивом. Для добавления карточки добавляем элемент в массив:

case 'CREATE_CARD':             
   const newItem = {         
     id: payload.id,
     title: payload.title,
   };
return [...state, newItem];

Вот пример to-do-app с использованием React-Redux: https://github.com/KonstantinModin/react-t/tree/master/src/components/Todo

Answer 2

Если кто-то столкнется с такой же проблемой, вот решение которое помогло мне

case 'CREATE_CARD': {
        return {
            ...state,
            boardItem: state.boardItem.map((item, index) => {
                if (item.id === action.payload.boardIndex) {
                    return {
                        ...item,
                        list: item.list.map((listArray) => {
                            if (listArray.listId === action.payload.listId) {
                                let newCardName = {
                                    cardName: action.payload.cardName
                                }
                                return {
                                    ...listArray,
                                    listItem: [...listArray.listItem, newCardName]
                                }
                            }
                            return listArray;
                        })
                    }
                }
                return item;
            })
        }
    }

БЛОГ НА HUSL

Как добавить новый обьект в массив Redux

Ответы (2 шт):