React + Redux рекомендует сохранять нормализованные данные и использовать селекторы для получения производных данных. Таким образом, в нашем магазине мы сохраняем Users и Tags, которые имеют отношения многие ко многим.
type Store = {
entities: {
users: User[];
tags: Tag[];
userTagMapping: { userId: string, tagId: string }[]
}
}
И, на наш взгляд, мы хотим показать некоторые производные данные для этого отношения многих ко многим. Например, мы хотим вычислить общее количество пользователей с некоторым тегом или онлайн-пользователей с некоторым тегом. Прямо сейчас мы решили это, используя rselect . Единственная проблема состоит в том, что вычисление этих вещей становится довольно утомительным. Например, у нас есть селектор, который возвращает карту из идентификатора тега в список пользователей, чтобы показать, какие пользователи принадлежат этому тегу (и наоборот, селектор из идентификатора пользователя в список тегов).
const selectUsersPerTag = createSelector(
selectUsers, selectTags, selectUserTagMapping,
(users, tags, mapping) => {
let result = {};
for (const tag on tags) {
const isUserMappedToTag = user => ({userId, tagId}) => userId == user.id && tagId === tag.id
result[tag.id] = users.filter(user => mapping.some(isUserMappedToTag(user)))
}
return result
}
)
и, на мой взгляд, это выглядит довольно некрасиво и слишком сложно для чтения на мой вкус.
Мои вопросы:
- Правильно ли мы понимаем рекомендации (использовать нормализацию и селекторы)?
- Является ли использование карты правильным способом обработки наших данных и отображения их в виде или есть лучший способ? Я спрашиваю, потому что это в основном копирует наши данные (слегка измененные) много раз в подпорки наших компонентов React
- Есть ли более хороший способ сделать это отображение (которое по сути является SQL-подобным соединением)? Потому что мне действительно не нравится этот императивный подход, и я бы нашел более функциональный подход.