Nested lists with redux redux-thunk slices

Question

I'm developing a large App, I chose redux and redux-thunk to manage its state, and now that I have a lot of boilerplates and methods, I feel disorganized. I also smell that some workaround I coded to make some part work, aren't correct.

My domain is related to shopping lists. I have two type of shopping lists: the shopping list of a particular shop, and a generic shopping list with our database products. Each "*List" has a collection of products, where each product has some additional properties that can be edit by the user, such as the quantity and the order of the item in the list.

For redux I have a ShoppingListsStore and a GenericListsStore, two different stores.

The first problem I encountered was to let useSelector to redraw the "list of all lists" page (each list item shows the total quantity of products in that list) when for example the quantity of a product inside a list was changed from a nested navigation page. The component didn't get notified by default, I had to make manually a comparison with a loop between the list object in the component (stored with useState at the first draw) and the list got from useSelector, if something is different, call setState and then trigger a draw.

I don't like this. What's the correct way to do that? I read that a possibile solution is to flatten you data structure, but I'm no sure about that.

My ShoppingList:

interface ShoppingList {
    id: number;
    name: string;
    products: ShoppingListProduct[];
    shopId: number | null;
    shopDeliveryType: DeliveryType | null;
    creationDate: string;
}

The ShoppingListProduct:

interface ShoppingListProduct {

    id?: number;

    ean: string;
    name: string;

    quantity: number;
    pricePerItem: number;

    // To not serialize when calling Api
    fullProductInfos: Product | null | undefined;
}

(fullProductInfos isn't edited by the user so I'm don't worry about it)