Redux: не могу понять, почему ownProps не синхронизируется с состоянием

Question

ПОЧЕМУ? https://codepen.io/jamesplayer/project/editor/AjWvBb

Я создаю большое приложение Redux и мне удалось создать ошибку, когда элементу списка передается идентификатор, которого больше нет в хранилище, поэтому, когда он собирается получить полный объект из хранилища, он может ' не могу найти его, что вызвало ошибку, которая, по-видимому, была исправлена ​​в response-redux здесь

Для воспроизведения требуется очень специфическая последовательность компонентов для некоторого монтажа, диспетчеризации, подключения и рендеринга, поэтому я создал пример проблемы в этом коде: https://codepen.io/jamesplayer/project/editor/AjWvBb

Кажется, что настройка большинства вещей в этой настройке может исправить ошибку, но я не совсем уверен, ПОЧЕМУ именно эта установка создает проблему. Если бы кто-то мог объяснить мне, почему именно этот порядок событий создает ошибку, я бы по достоинству оценил ее, я пытался разобраться в ней в течение длительного времени.

Базовая структура выглядит так:

<Parent>

    <Page1 "I dispatch an action to clear out the list items every time I mount,
            then re-populate them after about 500ms">

        <Page1Wrapper "I'm connected to the store. I get an update when my child 
                       Page1Child1 mounts">

            <Child1 "I dispatch an action when I mount that can affect Page1Wrapper">

            <Child2 "I'm connected to the store, though in this example I don't receive any updates that would cause a 
                     re-render">

                <List "I get a list of ids from the store. I pass each id to a ListItem">

                    <ListItem "I'm connected to the store. I get passed an id from 
                               List and fetch the whole listItem object">

    <Page2 "I don't do much, but going from page1 to page2 and then back to page1 is 
            a good way to reproduce the error">

Answer 1

Задача

В ConnectedList, state.listItems не было пустым, поэтому List отображает экземпляр ConnectedListItem.

Однако, state.listItems был очищен действием CLEAR_LIST_ITEMS прямо перед тем, как ConnectedListItem смог получить его из хранилища, из-за чего он не нашел совпадений у опустошенного state.listItems.

Эта ошибка требует очень точного времени для воспроизведения, что может объяснить, почему изменение вещи исправляет ее (например, если рендеринг ConnectedListItem завершается до CLEAR_LIST_ITEMS).

Решение

Если вы укажете значение по умолчанию listItem (например, const ListItem = ({ listItem = {} })), это предотвратит сбой, и ConnectedList правильно выполнит повторную визуализацию с обновленным state.listItems.

Я бы порекомендовал не делать state.listItems.map(listItem => listItem.id) в connect, так как это вызывает постоянную повторную визуализацию компонента, поскольку создается другой массив, даже если state.listItems не изменился. Сопоставление должно быть сделано в компоненте или с помощью перевыбрать .

Более чистым подходом является передача всего элемента на ListItem, что устраняет необходимость подключения ListItem к магазину:

const ListItem = ({ item }) => <li>{item.text}</li>;

const List = ({ listItems }) => (
  <div style={{ backgroundColor: 'lightgreen' }} className="border">
    I'm List and I get a list of ids from the store. I pass each id to a ListItem.
    <ul>{listItems.map(item => <ListItem key={item.id} item={item} />)}</ul>
  </div>
);

const ConnectedList = connect(state => ({
  listItems: state.listItems,
}))(List);