Firebase onSnapshot 实时反应和 redux - 调度太多操作关注

Question

我有这个反应应用程序，它显示 table 有很多数据。

而且我需要知道 table 的一行何时从 firebase 中删除，但我需要实时执行此操作并将该数据保存在 reducer 调度操作中，以便我可以访问该数据应用程序的其余部分。

我用 useEffect

做到了

    useEffect(() => {
        const unsubscribe = onSnapshot(
            config(terminal!),
            (snapshot) => {
                // let addedData: any[] = [];
                let deletedData: any[] = [];

                snapshot.docChanges().forEach((change) => {
                    if (change.type === 'removed') {
                        deletedData = [...deletedData, change.doc.data()];
                    }
                });

                if (deletedData.length > 0) {
                    dispatch(realtimePickups(deletedData, 'removed'));
                }
            },
            (error) => {
                console.log(error);
            },
        );

        return () => unsubscribe();
    }, []);

因此，每次删除某些内容时，我都会发送一个操作，我的问题是，这是执行此操作的好方法吗？¿ 我会遇到性能问题吗？¿ 如果我发送 50 个操作，会有问题吗如果出于某种原因删除了 50 行？¿

如果这不是最好的方法，你能帮我改进我的代码吗？

Answer 1

这一行：

dispatch(realtimePickups(deletedData, 'removed'));

可能会导致渲染过多，具体取决于 Firebase 订阅调用的数量。这还取决于另外两个因素：

被删除的数据是否在组件中使用并挂载在DOM？
您使用的是不可变数据存储吗？

我推荐一个不同的版本：

安装use-debounce。它有一个我们需要使用的 useDebouncedCallback 挂钩。
然后:

import { useDebouncedCallback } from 'use-debounce';

let deletedData: any[] = [];

const MyComponent = () => {
  // Debounce massive updates by 1second
  const deletedDataDispatch = useDebouncedCallback((data) => {  
    dispatch(data)
    deletedData = []
  }, 1000);

  useEffect(() => {
    const unsubscribe = onSnapshot(
      config(terminal!),
      (snapshot) => {
        snapshot.docChanges().forEach((change) => {
          if (change.type === 'removed') {
            deletedData = [...deletedData, change.doc.data()];
          }
        });

        if (deletedData.length > 0) {
          deletedDataDispatch(realtimePickups(deletedData, 'removed'));
        }
      },
      (error) => {
        console.log(error);
      })

    return () => unsubscribe();
  }, [])
}

Firebase onSnapshot 实时反应和 redux - 调度太多操作关注

Firebase onSnapshot realtime with react and redux - Dispatching too many actions concern

firebase

reactjs

redux

react-redux