Следующая вещь, по-видимому, является причиной появления сообщений об ошибках консоли, а также время от времени зависания моего приложения, что делает его недоступным для отправки.
Как воспроизвести tehaviour
Допустим, у нас есть контейнерный компонент CatContainer, он отображает своих потомков, если свойство cat присутствует в состоянии. «кошки» в состоянии это объект типа cats = { snowy: { height: 5, width: 10, weight: 50 }, muschi: { height: 1, width: 12, weight: 20 } }.
Для каждого кота в объекте cat, CatContainer отображает компонент Cat, передавая имя Cat.
Компонент Cat подключается к состоянию и вытаскивает конкретного кота из объекта состояния cat.
Если я теперь удаляю кошку из состояния кошек, компонент Cat по-прежнему получает имя кошки сверху, но кошка больше не присутствует в состоянии, что приводит к исключению.
Я ожидал бы, что CatContainer детерминистически рендерит перед компонентом Cat нисходящим образом.
Однако, похоже, этого не происходит, что приводит к неопределенному поведению.
Возможные решения, которые я пробовал
- Проверка безопасности в компоненте Cat aka "
muschi in cats". Это работает, но это означает, что мне нужно переписать огромные части приложения, которых я бы хотел избежать любой ценой.
- Ищите способ сделать состояние распространения connect () в соответствии с уровнем вложенности
Я нашел вопрос в Google и нашел следующее:
- https://github.com/reactjs/react-redux/issues/509 - Указывает, что> v5, который я использую, каким-то образом может сделать изменения в режиме распространения-редукса распространяющимися сверху вниз, что решило бы проблему с кошкой.
- Как React перерисовывает дерево, если родительский и дочерний компоненты зависят от одной подпорки хранилища Redux? - По сути, спрашивает то же, что и я здесь.
Обе ссылки не предлагают прямого решения, и я полагаю, что этот вопрос очень актуален для всех, кто использует response-redux более продвинутым способом.
Для любого, кто сталкивается с этим, я имею в виду следующее решение для клейкой ленты, которое я действительно не хотел бы реализовывать.
- Оберните соединение и сделайте так, чтобы оно принимало контексты nestingLevel и renderedNestingLevel prop
- Увеличивать "nestingLevel" и передавать "renderedNestingLevel" после обновления компонента-оболочки компонента
- Блок визуализируется в функции
shouldComponentUpdate() упаковочной оболочки до nestingLevel === renderedNestingLevel-1.
С уважением