Как правильно работать с большой структурой Redux?

Question

[vispik88]

Добрый день. Есть такой вопрос.
Разрабатывается приложение с использованием Redux, React
Данные обновляются в стейте посредством сокета, раз в секунду. Это большой список данных, напримере следующей структуры:

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
    }
]

Т.е. это массив сырых данных какого-то вида. Обновления по сокету инкрементарные, т.е. если ничего не изменилось то придут просто ID сущностей (это означает что они всё ещё есть, не удалены), например записи с ID 4 и 5

Эти данные сырые, мне необходимо сформировать структуру для своих компонентов. Структура вложенная вида:

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",
                        }
            }
        }
    }
}

Отсюда исходит ряд проблем. Например при изменении одной записи в изначальном массиве в редьюсере создаётся новая копия состояния. Дальше по цепочке идёт перегруппировка всех компонентов в новую структуру (formatted). Я считаю это накладно, т.к. данные приходят инкрементарно и нужно отрисовтаь изменения только в 1 блоке

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

Ещё попутный вопрос, как хранить и обновлять большой список однотипных данных. В моём примере есть массив, где около 150 - 200 объектов данных большого размера. Они приходят по сокету и перерисовывается вся структура. Может быть есть какие-то примеры с преобразованием данных перед отрисовкой?

Был бы очень благодарен.

Answer 1

[Mikhail Osher]

В нужном контейнере открывается соединение.
При получении данных - делается dispatch.
В редьюсере идет обработка - просто создайте отдельный экшн для обработки такой пачки данных.
Но тут может возникнуть проблема - холостое обновление, ибо mapStateToProps вызывается после каждого dispatch, независимо от того, какая часть приложения была обновлена. По ссылке изменяется объект - запускается холостой рендер (PureComponent aka pure-render-mixin помогает, но все равно делается лишняя работа).
Оборачивайте тяжелые mapStateToProps библиотекой reselect.