В моем первом проекте Redux я совершил огромную ошибку. У меня были данные из API с глубоко вложенными данными. Я просто добавил эти данные в хранилище Redux без нормализации данных. Это приводит к раздутию кода и проблемам с производительностью. В этой статье я расскажу, как нормализовать данные и какие преимущества это дает React / Redux.
Ненормализованные данные
Чтобы сделать вещи конкретными, предположим, что мы создаем компонент для рендеринга статей:
Что, если мы хотим изменить информацию о пользователе?
Если вы просто измените одно из сообщений, компонент не будет обновляться новой информацией пользователя. Вы должны глубоко клонировать все данные сообщений или использовать неизменяемые структуры данных. Даже с ImmutableJS изменение глубинных структур может стать беспорядочным:
Нормализация
Мы можем выделить автора и каждого понравившегося в виде объекта user на карту всех пользователей. Затем замените каждый ссылкой на user вместо объекта.
Вы можете использовать библиотеку, такую как normalizr, для нормализации данных на основе схемы. Это замечательно, если у вас мало контроля над своими данными, например, если вы используете внешний API.
Мы также должны обновить компонент User. Мы можем передать ему id, который ссылается на пользователя и получить объект пользователя из состояния Redux:
Преимущества
Теперь по этим данным легко обновить пользователя. Вы можете обновлять пользователей, не изменяя ни одно из сообщений.
Поскольку сообщения не меняются, компонент "Сообщение" не нуждается в обновлении, только компонент "Пользователь". Аналогичным образом переупорядочивание лайков включает только сортировку списка идентификаторов и не приводит к обновлению каждого компонента User. Это может привести к огромному выигрышу в производительности, если у вас много лайков.
Опубликовано 12 декабря 2017 г.
Первоначально опубликовано на hgogonis.me.
