Redux не обновляет состояние
Redux не обновляет компонент даже после обновления реквизита. У меня есть данные, в которых есть lists, и в каждом списке может быть cards внутри и lists внутри них (например, папка внутри папки). cards и lists в основном представляют собой массив объектов.
Вот пример данных -
"data": [
{
"name": "new list",
"id": 31,
"created_at": "2018-11-07 17:48:10+05:30",
"lists": [],
"cards": [
{
"name": "new call",
"id": 8,
"display_order": 0,
"due_at": null,
"user_list_id": 31,
"description": null,
"created_at": "2018-11-08T16:34:14+05:30",
"labels": null
},
{
"name": "testing",
"id": 9,
"display_order": 2,
"due_at": null,
"user_list_id": 31,
"description": null,
"created_at": "2018-11-08T20:07:12+05:30",
"labels": null
},
{
"name": "new card",
"id": 7,
"display_order": 3,
"due_at": null,
"user_list_id": 31,
"description": null,
"created_at": "2018-11-08T16:34:09+05:30",
"labels": null
}
]
},
{
"name": "rename",
"id": 29,
"created_at": "2018-11-04 20:03:54+05:30",
"lists": [],
"cards": [
{
"name": "testing",
"id": 1,
"display_order": 0,
"due_at": null,
"user_list_id": 29,
"description": null,
"created_at": "2018-11-08T16:23:40+05:30",
"labels": null
},
{
"name": "testing again",
"id": 2,
"display_order": 1,
"due_at": null,
"user_list_id": 29,
"description": null,
"created_at": "2018-11-08T16:23:45+05:30",
"labels": null
}
]
}
]
Теперь после удаления карты я удаляю карту из таких списков.
const lists = this.props.lists;
const foundAt = lists.findIndex(e => parseFloat(e.id) === parseFloat(listId));
let cards = lists[foundAt]['cards'];
const cardFoundAt = cards.findIndex(e => parseFloat(e.id) === parseFloat(cardId));
cards.splice(cardFoundAt, 1);
lists[foundAt]['cards'] = cards;
this.props.rearrangeList(lists);
В моем действии есть это-
export const rearrangeLists = (lists) => {
return {
type: REARRANGED_LISTS,
payload: lists
};
};
В моем редукторе у меня есть это -
...
case REARRANGED_LISTS:
return {
...state,
lists: action.payload
};
...
Не знаю, где я ошибаюсь. Компонент, который отображает списки, не показывает обновленную версию, но в функции render этого component, когда я делаю console.info(this.props.lists), я вижу, что он показывает версию обновления, но на странице он не обновляет ее. Я действительно невежественен. Пожалуйста помоги. Заранее благодарим вас за помощь.
Ответы 2
Ваш редуктор должен обрабатывать удаление элемента из вашего массива.
case REMOVE_ITEM:
return data.filter(item => item.id !== payload.item_id)
у вас должен быть редуктор, подобный этому. Ваша дата передается вашему компоненту из состояния redux.
Публикую это с мыслью, что кому-то это поможет.
Проблема заключалась в том, что это массив объектов с вложенным в него массивом объектов.
Структура данных сама по себе проблематична для redux, и поэтому использование чего-то вроде нормализатор значительно упростит жизнь. Однако вы все равно можете решить эту проблему, используя свой собственный метод. Вот что я сделал в редукторе. Я отправил cardId, который хотел удалить из listId
let {lists} = state;
const foundAt = lists.findIndex(e => e.id === listId);
return {
...state,
lists: [
...lists.slice(0, foundAt),
{
...lists[foundAt],
cards: lists[foundAt]['cards'].filter(e => e.id !== cardId)
},
...lists.slice(foundAt + 1)
]
};
Надеюсь, это поможет.