Redux заново отображает всю таблицу после любого изменения записи в Firestore (React-Redux-Firebase + React-Virtualized) - PullRequest
1 голос
/ 12 ноября 2019

Я использую react-redux-firebase с reselect и react-virtualized, чтобы попытаться отобразить список из 500 элементов, в котором будут записи, которые будут изменяться, добавляться или удаляться в фоновом режиме.

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

Он надеялся, что при использовании reselect вместе с react-virtualized решит эту проблему, увы мне интересно, вызвано ли это тем, что я использую ternarys в некоторых моих столбцах, или есть другая проблема?

Если решения не существует, яможно сделать в отношении настроек таблицы / строки, возможно ли отменить / ограничить обновления, поступающие с useFireStoreConnect или useSelector, поэтому я буду обновлять таблицу не чаще, чем каждые 2/3 секунды?

const itemsSelector: any = createSelector(
    (state: any) => state.firestore.ordered.items,
    items => items
);

const ItemsTable: React.FC = React.memo(() => {

    useFirestoreConnect('items');

    const items: any = useSelector((state: any) => itemsSelector(state));

    console.log(items) // 500~ firestore items, called every time there's a change to one entry

    ...

    // The entire table is being re-rendered every time a single firebase entry that's been synced to redux is changed
    return (
        <AutoSizer>
            {({ height, width }) => (
                <Table
                    width={width}
                    height={height}
                    headerHeight={48}
                    rowHeight={48}
                    rowCount={items.length}
                    rowGetter={({ index }) => items[index]}
                >

                    <Column
                        label="Status"
                        dataKey="status.name"
                        cellRenderer={({ rowData }) =>
                            rowData.status ? rowData.status.name : '-'
                        }
                        width={100}
                    />
     ...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...