Redux Selector для нормализованного состояния

Мне нужна помощь в создании селекторов для нормализованного состояния на основе документации из редукс документы

Состояние

{
    "entities": {
        "people": {
            "byId": {
                "1": {
                    "name": "Test User 1",
                    "classes": ["class1", "class2"],
                    "isSelected": true
                },
                "2": {
                    "name": "Test User 2",
                    "classes": ["class2", "class3"],
                    "isSelected": false
                },
                "3": {
                    "name": "Test User 3",
                    "classes": ["class4"],
                    "isSelected": false
                }
            },
            "allIds": ["1", "2", "3"]
        },
        "classes": {
            "byId": {
                "class1": {
                    "name": "Class 1",
                    "courses": ["course1", "course2"]
                },
                "class2": {
                    "name": "Class 2",
                    "courses": ["course2"]
                },
                "class3": {
                    "name": "Class 3",
                    "courses": ["course1", "course3"]
                }
            },
            "allIds": ["class1", "class2", "class3"]
        },
        "courses": {
            "byId": {
                "course1": {
                    "name": "Course 1"
                },
                "course2": {
                    "name": "Course 2"
                },
                "course3": {
                    "name": "Course 3"
                }
            },
            "allIds": ["course1", "course2", "course3"]
        }
    }
}

В профиле каждого человека я хочу отображать связанные классы и курсы. Я не могу создать селекторы, чтобы получить доступ к этой информации.

Народный селектор

import { createSelector } from 'reselect';

const getPeopleDetails = createSelector(
    state => state.entities.people,
    (people) => people.allIds.reduce(
        (acc, cV) => {  
            if (people.byId[cV].isSelected) acc.push(people.byId[cV]); return acc; 
        }, [])
);

export default {
    getPeopleDetails
}

Поскольку createSelector не принимает никаких параметров. Для моего слайса в состоянии для courses; как я могу создать селектор, где можно получить информацию для текущего выбранного профиля людей?

Должен ли я создать соединительную таблицу для отображения отношений между сущностями?

(Я очень новичок в реакции/редуксе)

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
3
0
819
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ваш селектор может принимать как свойства, так и состояние. Затем вы можете использовать его в качестве аргумента для селектора:

const getPerson = (state, props) =>
  state.entities.people.byId[props.id];

const getPersonDetails = createSelector(
  getPerson,
  state => state.entities.classes,
  (person, classes) => {
    // loop through classes, etc..
    // return whatever
  }
);

Здравствуйте @Austin, спасибо за ответ. Мое приложение следует принципам редукс-утки. Селектор Person не должен запрашивать слайс состояния, за который он не отвечает, верно?

Vabs 26.01.2019 15:28

Нет, не должно, но вы можете запросить его, используя селектор, предоставленный относительной уткой/веткой.

Andrea Carraro 03.02.2019 10:41
Ответ принят как подходящий

Я решил эту проблему, создав еще один срез состояния с именем ui. В этом фрагменте я управляю идентификаторами выбранных объектов.

Компоненты отображаются, когда в выбранном идентификаторе есть значение для определенного компонента. У каждого компонента есть условие if, которое проверяет, заполнены ли слайс ui выбранными идентификаторами.

React Design

Например,

{
    "ui": {
        "personSelectedId": ["1"],
        "classSelectedId": ["class1", "class2"],
        "courseSelectedId": ["course1", "course2"],
    }
}

Надеюсь, это имеет смысл.

Другие вопросы по теме