What is the correct way to work with a large Redux structure?

Question

JavaScript

Good afternoon. There is such a question.
An application is being developed using Redux, React
The data is updated in the state via a socket, once a second. This is a large list of data, such as the following structure:

var items = [
    {
        id :1,
        name: "test_item",
        country: {
            id: "1",
            name: "country_name_1"
        },
        tournament: {
            id: "1",
            name: "tournament_name_1"
        }
    },
    {
        id :2,
        name: "test_item2",
        country: {
            id: "2",
            name: "country_name_2"
        },
        tournament: {
            id: "1",
            name: "tournament_name_2"
        }
    },
    {
        id :3,
        name: "test_item3",
        country: {
            id: "1",
            name: "country_name_1"
        },
        tournament: {
            id: "1",
            name: "tournament_name_1"
        }
    },
    {
        id: 4
    },
    {
        id: 5
    }
]

Those. it is an array of raw data of some kind. Socket updates are incremental, i.e. if nothing has changed, then just entity IDs will come (this means that they are still there, not deleted), for example, records with ID 4 and 5
This data is raw, I need to form a structure for my components. Nested view structure:

var formatted = {
    countries: {
        1: {
            id: "1",
            name: "country_name_1",
            tournaments: {
                1: {
                    id: 1,
                    name: "tournament_1",
                    items: {
                       1: {
                           id: 1,
                           name: "test_item",
                       },
                        2: {
                           id: 1,
                           name: "test_item",
                       },
                    }
                },
                2: {
                    id: 3,
                    name: "tournament_3",
                    items: {
                        3: {
                            id: 3,
                            name: "test_item_3",
                        }
            }
        }
    }
}

This is where a number of problems come from. For example, when changing one record in the original array, a new copy of the state is created in the reducer. Further along the chain is the regrouping of all components into a new structure (formatted). I think it's expensive, because. the data comes in incrementally and you need to draw changes only in 1 block
Tell me how best and more correctly to implement the application, taking into account the fact that the raw data is not suitable for rendering the application, they need to be converted.
Another passing question is how to store and update a large list of the same type of data. In my example, there is an array with about 150 - 200 large data objects. They come over the socket and the whole structure is redrawn. Maybe there are some examples with data transformation before rendering?
I would be very grateful.

Answer 1

A connection is opened in the desired container.
When data is received, dispatch is done.
The reducer is processing - just create a separate action to process such a batch of data.
But here a problem can arise - an idle update, because mapStateToProps is called after each dispatch, regardless of which part of the application was updated. An object is changed by reference - a blank render is started (PureComponent aka pure-render-mixin helps, but it still does extra work).
Wrap heavy mapStateToProps with the reselect library .