Wsrtjtyk

Redux is not updating the component even after updating the props. I have a data which has lists inside them and each list can have a cards inside them and lists inside them too (like folder inside folder). cards and lists are basically an array of objects.
Here is a example data-

"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

            }

        ]

    }

]

Now after I delete a card, I remove the card from the lists like this.

    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);

In my action, I have this-

export const rearrangeLists = (lists) => {

return {

    type: REARRANGED_LISTS,

    payload: lists

};

};

In my reducer, I have this-

...

case REARRANGED_LISTS:

        return {

            ...state,

            lists: action.payload

        };

...

I don't know where I am doing it wrong. The component which renders the lists doesn't show the updated version but the in the render function of that component when I do a console.log(this.props.lists), I see that it's showing the update version but on the page, it doesn't update it. I am really clueless. Please help. Thank you in advance for you help.

Your reducer should handle the removal of the item from your array.

case REMOVE_ITEM:

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

you should have a reducer similar to this. Your date are passed down to your component from the redux state.

Posting this thinking that one will be helped by this.
The problem here was that it's an array of objects with nested array of objects in it.
The data structure is problematic in itself for redux and that is why using something like normalizer will make life a lot easier. However, you can still solve this using your own method. Here is what I did in the reducer. I sent the cardId that I wanted to remove from the 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)

                ]

            };

I hope this helps.