Redux не обновляет состояние - PullRequest
Новая
       6

Redux не обновляет состояние

0 голосов
/ 10 ноября 2018

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.log(this.props.lists), я вижу, что он показывает версию обновления, но на странице он не ' обновить Я действительно невежественен. Пожалуйста помоги. Заранее благодарю за помощь.

Ответы [ 2 ]

0 голосов
/ 10 ноября 2018

Размещение этого мышления, что это поможет. Проблема заключалась в том, что это массив объектов с вложенным массивом объектов. Структура данных сама по себе проблематична для избыточности, и поэтому использование чего-то вроде normalizer значительно облегчит жизнь. Тем не менее, вы все еще можете решить эту проблему, используя свой собственный метод. Вот что я сделал в редукторе. Я отправил 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)
                ]
            };

Надеюсь, это поможет.

0 голосов
/ 10 ноября 2018

Ваш редуктор должен обработать удаление элемента из вашего массива. 

case REMOVE_ITEM:
      return data.filter(item => item.id !== payload.item_id)

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

...