在Firestore条目发生任何更改后,Redux会重新呈现整个表(React-Redux-Firebase + React-Virtualized)

时间:2019-11-11 21:09:42

标签: reactjs redux react-virtualized reselect react-redux-firebase

我正在将react-redux-firebasereselectreact-virtualized结合使用,以尝试显示500〜项列表,该列表将在后台更改,添加或删除条目。

每次在Firebase上更改单个条目时,我的表函数组件都会从redux检索所有500条记录,然后再次重新呈现整个表,而不是重新更改特定的行。

曾经希望将reselectreact-virtualized一起使用可以解决此问题,a,我现在想知道这是由于我在某些专栏中使用三元数引起的,还是还有其他问题?

如果没有关于表/行调整的解决方案,是否可以对来自useFireStoreConnectuseSelector的更新进行反跳/限制,所以我只会更新表最多每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}
                    />
     ...

0 个答案:

没有答案