在不牺牲 Svelte 反应性的情况下限制 Firestore 中的读/写答案

【问题标题】：Throttle read/writes in firestore without sacrificing Svelte reactivity在不牺牲 Svelte 反应性的情况下限制 Firestore 中的读/写
【发布时间】：2021-11-25 09:12:42
【问题描述】：

我正在构建一个抵押贷款计算器。

我有一个购买价格字段和一个预付款字段。两者都有一个范围滑块。当您调整购买价格或首付时，计算器会显示美元金额（反应性）。

我在后端有 Firestore，但从范围滑块向 Firestore 发送输入更新可能会很快变得昂贵。

有没有一种方法可以在不牺牲 Svelte 在前端的反应性的情况下通过 Firestore 限制读取/写入？

我想在 View 和 Firestore 之间建立一个 Svelte 商店，但您将如何同步 Svelte 商店和 Firestore？

它比单纯的抵押贷款计算器更复杂，我只是觉得这是一个很好的类比。

另外，我确实需要为每个用户保留数据，以便他们稍后重新访问。

【问题讨论】：

用户在下次访问时看到相同的值/最后的值肯定被保存有多重要？这只是为用户提供服务，还是您想要用于分析的值，还是它们对订购过程很重要？
您可以创建一个自定义存储来设置值并消除数据库更新的抖动
@Corrl - 我更新了我的帖子。我确实需要这种坚持。
@Tonton-Blax - 那么 Firestore 是否只能初始化 / 为 Store 补充水分？是否有任何视图数据直接依赖于 Firestore？这是为我准备的，谢谢！

标签： svelte svelte-store

【解决方案1】：

我已经实施了@Tonton-Blax 建议的解决方案。

我添加了一个自定义存储，其中包含更新我的 Firestore 数据库的功能。然后我只是把它包裹在一个去抖动中。

见REPL

自定义商店：https://svelte.dev/tutorial/custom-stores

【讨论】：

【解决方案2】：

为什么不简单地使用范围输入的change 事件？
拖动滑块时，当前值会被动显示。但是只有释放handle才会触发change事件，设置值才能保存到firestore > REPL

<script>
    let value="30"
    
    function handleOnChange(event) {
        console.log(event.target.value)
        //save value to firestore   
    }
</script>

<p>
    {value}
</p>
<input type="range" min="0" max="100" bind:value on:change={handleOnChange}>

【讨论】：

我最终使用自定义存储来处理通过 change 事件的更新以及在后端更新 Firestore（尽管已去抖动）。谢谢！
@drupalphil 因为我也在使用 Firestore，我很想看看你的解决方案